canvasjs vs chartjs vs morrisjs (v2)

Revision 2 of this benchmark created by Alex on January 20, 2015

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="https://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 src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="http://www.chartjs.org/assets/Chart.js"></script>

<div id="chart1" style="width:400px;height:300px"></div>
<canvas id="chart2" height="300" width="400"></canvas>
<div id="chart3" style="width:400px;height:300px"></div>

Setup

var data1 = {
      data: [{
        type: "splineArea",
        color: "rgba(54,158,173,.7)",
        dataPoints: [{
          x: new Date(1992, 0),
          y: 2506000
        }, {
          x: new Date(1993, 0),
          y: 2798000
        }, {
          x: new Date(1994, 0),
          y: 3386000
        }, {
          x: new Date(1995, 0),
          y: 6944000
        }, {
          x: new Date(1996, 0),
          y: 6026000
        }, {
          x: new Date(1997, 0),
          y: 2394000
        }, {
          x: new Date(1998, 0),
          y: 1872000
        }, {
          x: new Date(1999, 0),
          y: 2140000
        }, {
          x: new Date(2000, 0),
          y: 7289000
        }, {
          x: new Date(2001, 0),
          y: 4830000
        }, {
          x: new Date(2002, 0),
          y: 2009000
        }, {
          x: new Date(2003, 0),
          y: 2840000
        }, {
          x: new Date(2004, 0),
          y: 2396000
        }, {
          x: new Date(2005, 0),
          y: 1613000
        }, {
          x: new Date(2006, 0),
          y: 2821000
        }, {
          x: new Date(2007, 0),
          y: 2000000
        }, {
          x: new Date(2008, 0),
          y: 1397000
        }]
      }]
    }
    
    var data2 = {
      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'q', 'r'],
      datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        data: [2506000, 2798000, 3386000, 6944000, 6026000, 2394000, 1872000, 2140000, 7289000, 4830000, 2009000, 2840000, 2396000, 1613000, 2821000, 2000000, 1397000]
      }]
    }
    
    var data3 = [{
      "y": 1996,
      "a": 2506000
    }, {
      "y": 1997,
      "a": 2798000
    }, {
      "y": 1998,
      "a": 3386000
    }, {
      "y": 1999,
      "a": 6944000
    }, {
      "y": 2000,
      "a": 6026000
    }, {
      "y": 2001,
      "a": 2394000
    }, {
      "y": 2002,
      "a": 1872000
    }, {
      "y": 2003,
      "a": 2140000
    }, {
      "y": 2004,
      "a": 7289000
    }, {
      "y": 2005,
      "a": 4830000
    }, {
      "y": 2006,
      "a": 2009000
    }, {
      "y": 2007,
      "a": 2840000
    }, {
      "y": 2008,
      "a": 2396000
    }, {
      "y": 2009,
      "a": 1613000
    }, {
      "y": 2010,
      "a": 2821000
    }, {
      "y": 2011,
      "a": 2000000
    }, {
      "y": 2012,
      "a": 1397000
    }];
    
    function draw1() {
    //  return;
      var chart = new CanvasJS.Chart("chart1", data1);
    
      chart.render();
    };
    
    function draw2() {
      var ctx = document.getElementById("chart2").getContext("2d");
      var chart = new Chart(ctx).Line(data2);
    };
    
    function draw3() {
    
    //  return;
      Morris.Area({
        element: 'chart3',
        data: data3,
        xkey: 'y',
        ykeys: ['a'],
        labels: ['Series A', ]
      })
    
    };

Test runner

draw1();

draw2();

draw3();

Revisions

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

• Revision 1: published by Javier Lazaro on May 15, 2014
• Revision 2: published by Alex on January 20, 2015