SVG Lines via JS (unfinished)

HTML

<div class="widget">
  <svg height="20%"></svg>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-width: 100%;
  background: rgb(225,225,225);
}

.widget {
  width: calc( 100% / 2 );
  margin: 5% auto;
}

svg {
  background: rgb(255,255,255);
  width: 100%;
}

line {
  stroke: rgb(255,0,0);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

/**
 * Simple jQuery Line Chart
 *
 * Author: Devhats
 * Version: 1.0
 */
(function($) {

  $.fn.extend({

    maschineSimpleLineChart: function(options) {

      var defaults = {
        items: [0, -25, 25, -15]
      }

      var options = $.extend(defaults, options);

      return this.each(function() {

        var currentSelector = $(this);
        var o = options;

        var ChartWidth = currentSelector.parent().innerWidth();
        var ChartHeight = currentSelector.parent().innerHeight();
        var ItemCount = o.items.length;
        var BaseHeight = ChartHeight / 2;
        var ParentItemHeight = BaseHeight;
        var ParentItemWidth = 0;
        var ItemWidth = ChartWidth / ItemCount;
        var Number = 0;
        var CurrentItemHtml;

        for (i = 0; i < ItemCount; i++) {
          Number = i + 1;
          CurrentItemHtml += '<line class="line-' + Number + '" />';
        }

        currentSelector.html(CurrentItemHtml);

        o.items.forEach(function(item, index) {

          Number = index + 1;

          var CurrentItem = $('.line-' + Number);

          CurrentItem.attr({
            x1: ParentItemWidth,
            y1: ParentItemHeight,
            x2: ParentItemWidth + ItemWidth,
            y2: BaseHeight - item
          });

          // update vars
          ParentItemHeight = BaseHeight - item;
          ParentItemWidth = ParentItemWidth + ItemWidth;

        });

      })

    }
  })
})(jQuery)

// usage
jQuery(function($) {

  $('svg').maschineSimpleLineChart({
    items: [0, -50, 25, -25]
  });
  
});