highcharts vs amcharts

Benchmark created by Luisa on December 18, 2013

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>

Setup

window.getHighChartsData = function() {
      return [{
        name: 'Cherno More',
        data: [
          [Date.parse("2012-09-19T20:38:56.319Z"), 1.92],
          [Date.parse("2012-09-19T20:54:07.919Z"), 1.72],
          [Date.parse("2012-09-19T20:57:10.239Z"), 1.68],
          [Date.parse("2012-09-19T21:03:14.879Z"), 1.74],
          [Date.parse("2012-09-19T21:06:17.199Z"), 1.74],
          [Date.parse("2012-09-19T21:24:31.119Z"), 1.82],
          [Date.parse("2012-09-19T21:45:47.359Z"), 1.88],
          [Date.parse("2012-09-19T21:48:49.679Z"), 1.86],
          [Date.parse("2012-09-19T22:00:58.959Z"), 1.92],
          [Date.parse("2012-09-19T22:19:12.879Z"), 1.9],
          [Date.parse("2012-09-19T22:22:15.199Z"), 1.9],
          [Date.parse("2012-09-19T22:37:26.799Z"), 1.84],
          [Date.parse("2012-09-19T22:43:31.439Z"), 1.86],
          [Date.parse("2012-09-19T22:46:33.759Z"), 1.84],
          [Date.parse("2012-09-19T22:49:36.079Z"), 1.82],
          [Date.parse("2012-09-19T23:07:49.999Z"), 1.82],
          [Date.parse("2012-09-19T23:10:52.319Z"), 1.8]
        ]
      }, {
        name: 'Botev Plovdiv',
        data: [
          [Date.parse("2012-09-19T20:38:56.319Z"), 2.9],
          [Date.parse("2012-09-19T20:54:07.919Z"), 2.68],
          [Date.parse("2012-09-19T20:57:10.239Z"), 2.66],
          [Date.parse("2012-09-19T21:03:14.879Z"), 2.74],
          [Date.parse("2012-09-19T21:06:17.199Z"), 2.74],
          [Date.parse("2012-09-19T21:24:31.119Z"), 2.82],
          [Date.parse("2012-09-19T21:45:47.359Z"), 2.88],
          [Date.parse("2012-09-19T21:48:49.679Z"), 2.86],
          [Date.parse("2012-09-19T22:00:58.959Z"), 2.88],
          [Date.parse("2012-09-19T22:19:12.879Z"), 2.9],
          [Date.parse("2012-09-19T22:22:15.199Z"), 2.82],
          [Date.parse("2012-09-19T22:37:26.799Z"), 2.84],
          [Date.parse("2012-09-19T22:43:31.439Z"), 2.86],
          [Date.parse("2012-09-19T22:46:33.759Z"), 2.84],
          [Date.parse("2012-09-19T22:49:36.079Z"), 2.82],
          [Date.parse("2012-09-19T23:07:49.999Z"), 2.8],
          [Date.parse("2012-09-19T23:10:52.319Z"), 2.8]
        ]
      }, {
        name: 'The Draw',
        data: [
          [Date.parse("2012-09-19T20:38:56.319Z"), 3.55],
          [Date.parse("2012-09-19T20:54:07.919Z"), 3.6],
          [Date.parse("2012-09-19T20:57:10.239Z"), 3.65],
          [Date.parse("2012-09-19T21:03:14.879Z"), 3.7],
          [Date.parse("2012-09-19T21:06:17.199Z"), 3.8],
          [Date.parse("2012-09-19T21:24:31.119Z"), 3.85],
          [Date.parse("2012-09-19T21:45:47.359Z"), 3.45],
          [Date.parse("2012-09-19T21:48:49.679Z"), 3.5],
          [Date.parse("2012-09-19T22:00:58.959Z"), 3.55],
          [Date.parse("2012-09-19T22:19:12.879Z"), 3.7],
          [Date.parse("2012-09-19T22:22:15.199Z"), 3.5],
          [Date.parse("2012-09-19T22:37:26.799Z"), 3.75],
          [Date.parse("2012-09-19T22:43:31.439Z"), 3.8],
          [Date.parse("2012-09-19T22:46:33.759Z"), 3.55],
          [Date.parse("2012-09-19T22:49:36.079Z"), 3.65],
          [Date.parse("2012-09-19T23:07:49.999Z"), 3.7],
          [Date.parse("2012-09-19T23:10:52.319Z"), 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
      }];
    }

Test runner

if (window.hgtChrt) window.hgtChrt.destroy();
window.hgtChrt = new Highcharts.Chart({
  chart: {
    renderTo: 'highcharts-container',
    type: 'spline'
  },
  title: {
    text: 'Average prices'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  yAxis: {
    title: {
      text: 'average price'
    },
    min: 0
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
    }
  },
  series: window.getHighChartsData()
});

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);
 

Revisions

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

• Revision 1: published by Luisa on December 18, 2013
• Revision 2: published on March 21, 2014
• Revision 3: published on July 14, 2014
• Revision 4: published on November 9, 2014