SVG Testing w. Line Chart (with Path...)

by Kevin Pliester

HTML

<div class="widget">
  <svg class="test"></svg>
</div>

CSS

* {
  transition: all .2s ease;
}

body {
  margin: 0;
  padding: 0;
  background: #eee;
  position: relative;
}

.widget {
  margin: 5% auto;
  width: 750px;
  background: #fff;
  box-shadow: 0 2px 15px 0px rgba(225, 225, 225, .5);
}

svg {
  display: block;
  width: 100%;
  height: 300px;
}

path {
  fill: none;
  stroke: #3498db;
  stroke-width: 5;
}

.dots {
  stroke: #2c3e50;
  fill: #2c3e50;
  stroke-width: 5;
  cursor: pointer;
}

.labels {
  font-family: arial;
  font-size: 14px;
  font-weight: normal;
  color: rgba(44, 62, 80, 1.0);
  text-anchor: middle;
}

JavaScript

/**
 * jQuery & SVG Path Chart
 *
 * Author: Devhats
 * Version: 1.0
 */
(function($) {

  // sprintf
  String.prototype.sprintf = function() {
    var counter = 0;
    var args = arguments;
    return this.replace(/%s/g, function() {
      return args[counter++];
    });
  };

  // plugin "maschineSLC" start
  $.fn.extend({

    maschineSLC: function(options) {

      // available options 
      // and defaults
      var defaults = {
        items: [0, 25, -25, 15, 10],
        labels: [0, 25, -25, 15, 10],
        offset: 1
      }

      options = $.extend(defaults, options);

      return this.each(function() {

        var parent = {
          selector: $(this),
          options: options
        }

        var chart = {
          width: parent.selector.parent().innerWidth(),
          height: parent.selector.parent().innerHeight(),
          amount: parent.options.items.length + parent.options.offset
        }

        var helpers = {
          center: chart.height / 2,
          zero: 0
        }

        var items = {
          height: helpers.center,
          width: 0,
          space: chart.width / chart.amount,
          data: parent.options.items,
          amount: parent.options.items.length + parent.options.offset
        }

        var classes = {
          dots: 'dots',
          labels: 'labels'
        }

        var render = {
          paths: function() {

            // instances
            var paths = {
              items: '',
              container: parent.selector,
              counter: 0
            }

            // loop items and add new path
            for (i = 0; i < items.amount; i++) {
              paths.counter = i + 1;
              paths.items += '<path class="line-%s" />\n'.sprintf(paths.counter);
            }

            paths.container.html(paths.items);
          },
          dots: function() {

            // instances
            var dots = {
              items: '',
              container: '',
             ...