jQuery: peity

more at: http://benpickles.github.com/peity/

HTML

<p>
test
</p>
<span class="pie">226/360</span>
<span class="line" data-peity='{"max":20, "height":40, "width":120, "stroke":"red", "fill": "#ff6a07"}'>5,3,9,6,5,9,17,3,5,2</span>
<span class="bar">5,3,9,6,5,9,7,3,5,2</span>

CSS

svg {  }

JavaScript

// Peity jQuery plugin version 3.3.0
// (c) 2018 Ben Pickles
//
// http://benpickles.github.io/peity
//
// Released under MIT license.
(function($, document, Math, undefined) {
  var peity = $.fn.peity = function(type, options) {
    if (svgSupported) {
      this.each(function() {
        var $this = $(this)
        var chart = $this.data('_peity')

        if (chart) {
          if (type) chart.type = type
          $.extend(chart.opts, options)
        } else {
          chart = new Peity(
            $this,
            type,
            $.extend({},
              peity.defaults[type],
              $this.data('peity'),
              options)
          )

          $this
            .change(function() { chart.draw() })
            .data('_peity', chart)
        }

        chart.draw()
      });
    }

    return this;
  };

  var Peity = function($el, type, opts) {
    this.$el = $el
    this.type = type
    this.opts = opts
  }

  var PeityPrototype = Peity.prototype

  var svgElement = PeityPrototype.svgElement = function(tag, attrs) {
    return $(
      document.createElementNS('http://www.w3.org/2000/svg', tag)
    ).attr(attrs)
  }

  // https://gist.github.com/madrobby/3201472
  var svgSupported = 'createElementNS' in document && svgElement('svg', {})[0].createSVGRect

  PeityPrototype.draw = function() {
    var opts = this.opts
    peity.graphers[this.type].call(this, opts)
    if (opts.after) opts.after.call(this, opts)
  }

  PeityPrototype.fill = function() {
    var fill = this.opts.fill

    return $.isFunction(fill)
      ? fill
      : function(_, i) { return fill[i % fill.length] }
  }

  PeityPrototype.prepare = function(width, height) {
    if (!this.$svg) {
      this.$el.hide().after(
        this.$svg = svgElement('svg', {
          "class": "peity"
        })
      )
    }

    return this.$svg
      .empty()
      .data('_peity', this)
      .attr({
        height: height,
        width: width
      })
  }

  PeityPrototype.values =...