amcharts vs highcharts vs canvasjs vs chartjs vs flot (v18)

Revision 18 of this benchmark created by Torstein on

Preparation HTML

<!-- HighCharts -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/boost.js"></script>

<div id="highcharts-container" style="min-width: 400px; height: 400px; margin: 0 auto"></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>

<!-- 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>

<!-- Flot -->
<script type="text/javascript" src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="flot-chart" style="width:900px;height:500px"></div>

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

Setup

// random value generator (pick between -10 and 10)
      window.generateRandomY = function(){
          return Math.floor(Math.random() * 21) - 10;
      }
  
      window.getHighChartsData = function() {
        var datasets = { 'one':[], 'two':[], 'three':[] };
        for(var i=0;i<1000;i++){
          datasets['one'].push(window.generateRandomY());
          datasets['two'].push(window.generateRandomY());
          datasets['three'].push(window.generateRandomY());
        }
        return [{
          name: 'Cherno More',
          data: datasets['one']
        }, {
          name: 'Botev Plovdiv',
          data: datasets['two']
        }, {
          name: 'The Draw',
          data: datasets['three']
        }];
      };
  
  
      window.getCanvasjsData = function() {
        var datasets = { 'one':[], 'two':[], 'three':[] };
        for(var i=0;i<1000;i++){
          datasets['one'].push({ x: i, y: window.generateRandomY()});
          datasets['two'].push({ x: i, y: window.generateRandomY()});
          datasets['three'].push({ x: i, y: window.generateRandomY()});
        }
  
        return [datasets['one'],datasets['one'],datasets['one']];
      };
  
      window.getChartJsData = function() {
        var labelset = [];
        var datasets = { 'one':[], 'two':[], 'three':[] };
        for(var i=0;i<1000;i++){
          labelset.push("");
          datasets['one'].push(window.generateRandomY());
          datasets['two'].push(window.generateRandomY());
          datasets['three'].push(window.generateRandomY());
        }
  
        return {
          labels: labelset,
          datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            data: datasets['one']
          }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            data: datasets['two']
          }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(0,187,205,1)",
            pointColor: "rgba(0,187,205,1)",
            pointStrokeColor: "#fff",
            data: datasets['three']
          }]
        };
      };
  
      window.getAmData = function() {
        var datasets = [];
        for(var i=0;i<1000;i++){
          datasets.push({
            'date': i,
            'Cherno More': window.generateRandomY(),
            'Botev Plovdiv': window.generateRandomY(),
            'The Draw': window.generateRandomY()
          });
        }
        return datasets;
      };
  
      window.getFlotData = function() {
        var datasets = [[],[],[]];
        for(var i=0;i<1000;i++){
          datasets[0].push([i, window.generateRandomY()]);
          datasets[1].push([i, window.generateRandomY()]);
          datasets[2].push([i, window.generateRandomY()]);
        }
  
        return datasets;
      };

Test runner

Ready to run.

Testing in
TestOps/sec
Highcharts
if (window.hgtChrt) window.hgtChrt.destroy();
window.hgtChrt = new Highcharts.Chart({
  credits: { enabled: false },
  tooltip: { enabled: false },
  chart: {
    renderTo: 'highcharts-container',
    type: 'line'
  },
  plotOptions: {
    line: {
      allowPointSelect: false,
      animation: false,
      boostThreshold: 500,
      dataLabels: { enabled: false },
      enableMouseTracking: false,
      events: []
    }
  },
  series: window.getHighChartsData()
});
ready
Canvasjs
var data = window.getCanvasjsData();

var chartCanvas = new CanvasJS.Chart("canvasjs-chart", {
  interactivityEnabled: false,
  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
Chart.defaults.global.animation = false;
Chart.defaults.global.showTooltips = false;
Chart.defaults.global.tooltipEvents = [];
Chart.defaults.global.bezierCurve = false;
Chart.defaults.global.bezierCurveTension = 0;
Chart.defaults.global.pointDot = false;
Chart.defaults.global.pointDotRadius = 0;
Chart.defaults.global.datasetFill = false;
Chart.defaults.global.datasetStrokeWidth = 1;
Chart.defaults.global.events = [];
var chartJScanvas = new Chart(document.getElementById("chartjs-canvas").getContext("2d")).Line(window.getChartJsData(), {
  animation: false,
  onAnimationComplete: function() {},
  pointDot: false,
  bezierCurve: false,
  datasetFill:false,
  datasetStroke : true,
  datasetStrokeWidth : 1
});
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.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";
window.amChart.addGraph(graph);

// Germany graph
var graph = new AmCharts.AmGraph();
graph.title = "Botev Plovdiv";
graph.valueField = "Botev Plovdiv";
window.amChart.addGraph(graph);

// United Kingdom graph
var graph = new AmCharts.AmGraph();
graph.title = "The Draw";
graph.valueField = "The Draw";
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
Flot
var flotdata = window.getFlotData();

var flotChart = $.plot("#flot-chart", flotdata, {
            canvas: true,
            series: {
                shadowSize: 0,
                color: "rgb(255, 100, 123)"
            },
            yaxis: {show: false},
            xaxis: {show: false}
        });
ready

Revisions

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