sparkline

JavaScript performance comparison

Revision 3 of this test case created by Pedro

Info

Testing sparkline charts plugins

Preparation code

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


<script type="text/javascript" src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>


<script  type="text/javascript" src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.min.js"></script>

<script type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"></script>




<div id="teste1"></div>
<div id="teste2"></div>
<div id="teste3" style="width:100px; height:20px;"></div>
<div id="teste4" style="width:100px; height:20px;"></div>
<script>
Benchmark.prototype.setup = function() {
    Raphael.fromJquery = function($obj) {
      var obj = $obj.get(0),
        width = obj.scrollWidth,
        height = obj.scrollHeight;
      return Raphael($obj.attr('id'), width, height);
    };
   
    Raphael.fn.sparkline = function(data) {
      var paper = this,
        min = Math.min.apply(Math, data),
        max = Math.max.apply(Math, data),
        graph_opts = {
          padding: {
            top: 5,
            left: 5,
            bottom: 5,
            right: 5
          },
        },
        graph_width = paper.width - graph_opts.padding.left - graph_opts.padding.right,
        graph_height = paper.height - graph_opts.padding.top - graph_opts.padding.bottom,
        padding = graph_opts.padding.left;
   
      var to_coords = function(value, idx) {
        var step = (graph_width / (data.length - 1));
        return {
          y: max - min !== 0 ? -((value - min) / (max - min) * graph_height) + graph_height + graph_opts.padding.top : graph_height / 2 + graph_opts.padding.top,
          x: padding + idx * step
        };
      };
   
      var prev_pt;
   
      _.each(data, function(item, idx) {
        var pt = to_coords(item, idx);
   
       
          paper.circle(pt.x, pt.y, 1).attr({
            stroke: '#00F', r:3
          }).toFront();
       
   
        if (prev_pt) {
          var path = Raphael.format("M{0},{1}L{2},{3}z", prev_pt.x, prev_pt.y, pt.x, pt.y);
          paper.path(path).attr({
            stroke: '#666',
            'stroke-width': 0.5
          });
        }
        prev_pt = pt;
      });
    };
    var data = [1780, 1844, 6771, 3283, 9730];
};

Benchmark.prototype.teardown = function() {
    $("#teste1, #teste2, #teste3, #teste4").html("");
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
raphael
var r = Raphael(document.getElementById("teste1"), 100, 20);
r.sparkline(data);
pending…
jquery
$('#teste3').sparkline(data);
pending…
jqplot
 $.jqplot.config.enablePlugins = true;


    $.jqplot('teste4', [data], {
      gridPadding: {top:0, right:0, bottom:0, left:0},
      axes: {
        xaxis: { showTicks: false, showTickMarks: false },
        yaxis: { showTicks: false, showTickMarks: false } },
        title: { text: '', show: false },
        series: [
        {lineWidth: 1, markerOptions: { show: true, style: 'filledCircle',  lineWidth: .5, size: 2, color: '#666666', shadow: false} }
        ],
        grid: { drawGridLines: false, gridLineColor: '#fffdf6', background: '#fffdf6',  borderColor: '#999999', borderWidth: 1, shadow: false }
    });
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment