amcharts vs highcharts vs canvasjs (v15)

Revision 15 of this benchmark created by octopicorn on

Preparation HTML

<!-- HighCharts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="highcharts-container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<!-- AM Charts -->
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="amcharts-container" style="width: 900px; height: 500px;"></div>

<!-- canvasjs -->
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="canvasjs-chart" style="width: 900px; height: 500px;"></div>

<!-- chartjs -->
<script type="text/javascript" src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="chartjs-container" style="min-width: 900px; height: 500px; margin: 0 auto"><canvas id="chartjs-canvas" height="500px" width="900px"></canvas></div>

<style>
#canvasjs-chart canvas {
left:0px;
}
</style>

Setup

window.getHighChartsData = function() {
        return [{
          name: 'Cherno More',
          data: [1.92, 1.72, 1.68, 1.74, 1.74, 1.82, 1.88, 1.86, 1.92, 1.9, 1.9, 1.84, 1.86, 1.84, 1.82, 1.82, 1.8]
        }, {
          name: 'Botev Plovdiv',
          data: [2.9, 2.68, 2.66, 2.74, 2.74, 2.82, 2.88, 2.86, 2.88, 2.9, 2.82, 2.84, 2.86, 2.84, 2.82, 2.8, 2.8]
        }, {
          name: 'The Draw',
          data: [3.55, 3.6, 3.65, 3.7, 3.8, 3.85, 3.45, 3.5, 3.55, 3.7, 3.5, 3.75, 3.8, 3.55, 3.65, 3.7, 3.75]
        }];
      };
      
      window.getAmData = function() {
        return [{
          'date': '20:38',
          'Cherno More': 1.92,
          'Botev Plovdiv': 2.9,
          'The Draw': 3.55
        }, {
          'date': "20:54",
          'Cherno More': 1.68,
          'Botev Plovdiv': 2.68,
          'The Draw': 3.6
        }, {
          'date': "20:57",
          'Cherno More': 1.74,
          'Botev Plovdiv': 2.66,
          'The Draw': 3.65
        }, {
          'date': "21:03",
          'Cherno More': 1.74,
          'Botev Plovdiv': 2.74,
          'The Draw': 3.7
        }, {
          'date': "21:06",
          'Cherno More': 1.82,
          'Botev Plovdiv': 2.74,
          'The Draw': 3.8
        }, {
          'date': "21:24",
          'Cherno More': 1.88,
          'Botev Plovdiv': 2.82,
          'The Draw': 3.85
        }, {
          'date': "21:45",
          'Cherno More': 1.86,
          'Botev Plovdiv': 2.88,
          'The Draw': 3.45
        }, {
          'date': "21:48",
          'Cherno More': 1.92,
          'Botev Plovdiv': 2.86,
          'The Draw': 3.5
        }, {
          'date': "22:00",
          'Cherno More': 1.9,
          'Botev Plovdiv': 2.88,
          'The Draw': 3.55
        }, {
          'date': "22:19",
          'Cherno More': 1.9,
          'Botev Plovdiv': 2.9,
          'The Draw': 3.7
        }, {
          'date': "22:22",
          'Cherno More': 1.84,
          'Botev Plovdiv': 2.82,
          'The Draw': 3.5
        }, {
          'date': "22:37",
          'Cherno More': 1.86,
          'Botev Plovdiv': 2.84,
          'The Draw': 3.75
        }, {
          'date': "22:43",
          'Cherno More': 1.84,
          'Botev Plovdiv': 2.86,
          'The Draw': 3.8
        }, {
          'date': "22:46",
          'Cherno More': 1.82,
          'Botev Plovdiv': 2.84,
          'The Draw': 3.55
        }, {
          'date': "22:49",
          'Cherno More': 1.92,
          'Botev Plovdiv': 2.82,
          'The Draw': 3.65
        }, {
          'date': "23:07",
          'Cherno More': 1.82,
          'Botev Plovdiv': 2.8,
          'The Draw': 3.7
        }, {
          'date': "23:10",
          'Cherno More': 1.8,
          'Botev Plovdiv': 2.8,
          'The Draw': 3.75
        }];
      };
      
      window.getCanvasjsData = function() {
        return [[{
          x: 0,
          y: 1.92
        }, {
          x: 1,
          y: 1.72
        }, {
          x: 2,
          y: 1.68
        }, {
          x: 3,
          y: 1.74
        }, {
          x: 4,
          y: 1.74
        }, {
          x: 5,
          y: 1.82
        }, {
          x: 6,
          y: 1.88
        }, {
          x: 7,
          y: 1.86
        }, {
          x: 8,
          y: 1.92
        }, {
          x: 9,
          y: 1.9
        }, {
          x: 10,
          y: 1.9
        }, {
          x: 11,
          y: 1.84
        }, {
          x: 12,
          y: 1.86
        }, {
          x: 13,
          y: 1.84
        }, {
          x: 14,
          y: 1.82
        }, {
          x: 15,
          y: 1.82
        }, {
          x: 16,
          y: 1.8
        }], [{
          x: 0,
          y: 2.9
        }, {
          x: 1,
          y: 2.68
        }, {
          x: 2,
          y: 2.66
        }, {
          x: 3,
          y: 2.74
        }, {
          x: 4,
          y: 2.74
        }, {
          x: 5,
          y: 2.82
        }, {
          x: 6,
          y: 2.88
        }, {
          x: 7,
          y: 2.86
        }, {
          x: 8,
          y: 2.88
        }, {
          x: 9,
          y: 2.9
        }, {
          x: 10,
          y: 2.82
        }, {
          x: 11,
          y: 2.84
        }, {
          x: 12,
          y: 2.86
        }, {
          x: 13,
          y: 2.84
        }, {
          x: 14,
          y: 2.82
        }, {
          x: 15,
          y: 2.8
        }, {
          x: 16,
          y: 2.8
        }], [{
          x: 0,
          y: 3.55
        }, {
          x: 1,
          y: 3.6
        }, {
          x: 2,
          y: 3.65
        }, {
          x: 3,
          y: 3.7
        }, {
          x: 4,
          y: 3.8
        }, {
          x: 5,
          y: 3.85
        }, {
          x: 6,
          y: 3.45
        }, {
          x: 7,
          y: 3.5
        }, {
          x: 8,
          y: 3.55
        }, {
          x: 9,
          y: 3.7
        }, {
          x: 10,
          y: 3.5
        }, {
          x: 11,
          y: 3.75
        }, {
          x: 12,
          y: 3.8
        }, {
          x: 13,
          y: 3.55
        }, {
          x: 14,
          y: 3.65
        }, {
          x: 15,
          y: 3.7
        }, {
          x: 16,
          y: 3.75
        }]];
      };
      
      window.getChartJsData = function() {
        return {
          labels: ["Cherno More", "Botev Plovdiv", "The Draw"],
          datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            data: [1.92, 1.72, 1.68, 1.74, 1.74, 1.82, 1.88, 1.86, 1.92, 1.9, 1.9, 1.84, 1.86, 1.84, 1.82, 1.82, 1.8]
          }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            data: [2.9, 2.68, 2.66, 2.74, 2.74, 2.82, 2.88, 2.86, 2.88, 2.9, 2.82, 2.84, 2.86, 2.84, 2.82, 2.8, 2.8]
          }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(0,187,205,1)",
            pointColor: "rgba(0,187,205,1)",
            pointStrokeColor: "#fff",
            data: [3.55, 3.6, 3.65, 3.7, 3.8, 3.85, 3.45, 3.5, 3.55, 3.7, 3.5, 3.75, 3.8, 3.55, 3.65, 3.7, 3.75]
          }]
        };
      };

Test runner

Ready to run.

Testing in
TestOps/sec
Highcharts
if (window.hgtChrt) window.hgtChrt.destroy();
window.hgtChrt = new Highcharts.Chart({
  chart: {
    renderTo: 'highcharts-container',
    type: 'spline'
  },
  series: window.getHighChartsData()
});
ready
amCharts
if (window.amChart) window.amChart.clear();

// SERIAL CHART
window.amChart = new AmCharts.AmSerialChart();
window.amChart.dataProvider = window.getAmData();
window.amChart.categoryField = "date";
window.amChart.startDuration = 0.5;
window.amChart.balloon.color = "#000000";

// AXES
// category
var categoryAxis = window.amChart.categoryAxis;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
categoryAxis.position = "top";

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Average Prices";
valueAxis.dashLength = 5;
valueAxis.axisAlpha = 0;
valueAxis.minimum = 1;
valueAxis.maximum = 6;
valueAxis.gridCount = 10;
window.amChart.addValueAxis(valueAxis);

// GRAPHS
// Italy graph						            		
var graph = new AmCharts.AmGraph();
graph.title = "Cherno More";
graph.valueField = "Cherno More";
graph.balloonText = "place taken by Cherno More in [[category]]: [[value]]";
graph.bullet = "round";
window.amChart.addGraph(graph);

// Germany graph
var graph = new AmCharts.AmGraph();
graph.title = "Botev Plovdiv";
graph.valueField = "Botev Plovdiv";
graph.balloonText = "place taken by Botev Plovdiv in [[category]]: [[value]]";
graph.bullet = "round";
window.amChart.addGraph(graph);

// United Kingdom graph
var graph = new AmCharts.AmGraph();
graph.title = "The Draw";
graph.valueField = "The Draw";
graph.balloonText = "place taken by The Draw in [[category]]: [[value]]";
graph.bullet = "round";
window.amChart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.zoomable = false;
chartCursor.cursorAlpha = 0;
window.amChart.addChartCursor(chartCursor);

// LEGEND
var legend = new AmCharts.AmLegend();
legend.useGraphSettings = true;
window.amChart.addLegend(legend);

// WRITE
var wrapper = document.getElementById("amcharts-container");
window.amChart.write(wrapper);
ready
Canvasjs
var data = window.getCanvasjsData();

var chartCanvas = new CanvasJS.Chart("canvasjs-chart", {
  data: [{
      type: "line",
      name: "Cherno More",
      color: "#F08080",
      dataPoints: data[0]
    }, {
      type: "line",
      name: "Botev Plovdiv",
      color: "#20B2AA",
      dataPoints: data[1]
    }, {
      type: "line",
      name: "The Draw",
      color: "#423543",
      dataPoints: data[2]
    }
  ]
});

chartCanvas.render();
ready
Chart.js
var chartJScanvas = new Chart(document.getElementById("chartjs-canvas").getContext("2d")).Line(window.getChartJsData(), {
  animation: false,
  onAnimationComplete: function() {}
});
ready

Revisions

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