Chart libraries comparison

Benchmark created on June 16, 2014

Description

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>

<div id="morris" style="height: 250px;"></div>        
<canvas id="chartjs" width="600" height="400"></canvas>
<div id="flotPlaceholder" style="width:600px;height:300px"></div>
<div id="flotLegend"></div>
<div id="nvd3">
    <svg></svg>
</div>

<script>
          var morrisOptions = {
            // ID of the element in which to draw the chart.
            element: 'morris',
            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: [
              { key: 1, up: 300, down: 600 },
              { key: 2, up: 600, down: 300 },
              { key: 3, up: 550, down: 250 },
              { key: 4, up: 400, down: 300 },
              { key: 5, up: 300, down: 400 }
            ],
            // The name of the data record attribute that contains x-values.
            xkey: 'key',
            // A list of names of data record attributes that contain y-values.
            ykeys: ['up', 'down'],
            // Labels for the ykeys -- will be displayed when you hover over the
            // chart.
            labels: ['Up', 'Down'],
            lineColors: ["#4ACAB4", "#878BB6"],
            xLabels: 'key',
            behaveLikeLine: true,
            fill: false
          };

          var chartjsData = {
              labels: [1,2,3,4,5],
              datasets : [
                {
                      label: "up",
                    fillColor : "rgba(172,194,132,0.4)",
                    strokeColor : "#ACC26D",
                    pointColor : "#fff",
                    pointStrokeColor : "#9DB86D",
                    data : [300, 600, 550, 400, 300]
                },
                  {
                      label: "down",
                      fillColor : "rgba(172,194,132,0.4)",
                      strokeColor : "#878BB6",
                      pointColor : "#fff",
                      pointStrokeColor : "#878BB6",
                      data : [600, 300, 250, 300, 400]
                  }
            ]
          };

          var chartjsOptions = {
               scaleOverlay : true
          };

          var chartjs = document.getElementById('chartjs').getContext('2d');

          var flotData = [ 
                { 
                    label: "up",
                    data:[[1, 300], [2, 600], [3, 550], [4, 400], [5, 300]],
                    shadowSize: 0,
                    color: "#4ACAB4",
                    hoverable: true,
                    clickable: true
                },
                { 
                    label: "down",
                    data:[[1, 600], [2, 300], [3, 250], [4, 300], [5, 400]],
                    shadowSize: 0,
                    color: "#878BB6",
                    hoverable: true,
                    clickable: true
                }
            ];

            var flotOptions = { 
                series: {
                    lines: { show: true },
                    points: { show: true },
                },
                legend:{        
                    container:$("#flotLegend"),
                    show: true,          
                    noColumns: 0
                }
            };

            var nvData = [
                {
                  values: [{x:1, y:300}, {x:2, y:600}, {x:3, y:550}, {x:4, y:400}, {x:5, y:300}],
                  key: "up",
                  color: "#4ACAB4"
                },
                {
                  values: [{x:1, y:600}, {x:2, y:300}, {x:3, y:250}, {x:4, y:300}, {x:5, y:400}],
                  key: "down",
                  color: "#878BB6"
                }
              ];
        </script>

Teardown

    document.getElementById("morris").innerHTML = "";
    document.getElementById("chartjs").innerHTML = "";
    document.getElementById("flotPlaceholder").innerHTML = "";
    document.getElementById("flotLegend").innerHTML = "";
  

Test runner

var mChart = new Morris.Area(morrisOptions);

new Chart(chartjs).Line(chartjsData, chartjsOptions);

$.plot($("#flotPlaceholder"), flotData, flotOptions);

nv.addGraph(function() {
  var nvChart = nv.models.lineChart()
    .margin({
      left: 100
    }) //Adjust chart margins to give the x-axis some breathing room.
  .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
  .transitionDuration(350) //how fast do you want the lines to transition?
  .showLegend(true) //Show the legend, allowing users to turn on/off line series.
  .showYAxis(true) //Show the y-axis
  .showXAxis(true) //Show the x-axis
  ;

  nvChart.xAxis //Chart x-axis settings
  .axisLabel('Time (ms)')
    .tickFormat(d3.format(',r'));

  nvChart.yAxis //Chart y-axis settings
  .axisLabel('Voltage (v)')
    .tickFormat(d3.format('.02f'));

  d3.select('#nvd3 svg') //Select the <svg> element you want to render the chart in.   
  .datum(nvData) //Populate the <svg> element with chart data...
  .call(nvChart); //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(function() {
    nvChart.update()
  });
  return nvChart;
});

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on June 16, 2014