Multi line chart(amcharts/highcharts) (v5)

Revision 5 of this benchmark created on


Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js">
</script>
<script src="http://www.amcharts.com/lib/amcharts.js">
</script>
<div id="splines-amcharts" style="width:800px; height:400px; margin:0 auto;">
</div>
<div id="splines-highcharts" style="width:800px; height:400px; margin:0 auto;">
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
amcharts
var lineChart = [{
  month: "Jan",
  shanghai: 7.0,
  beijing: -0.2,
  wuhan: -0.9,
  shenzhen: 3.0
}, {
  month: "Feb",
  shanghai: 6.9,
  beijing: 0.8,
  wuhan: 0.6,
  shenzhen: 3.2
}, {
  month: "Mar",
  shanghai: 9.5,
  beijing: 5.7,
  wuhan: 3.5,
  shenzhen: 2.7
}, {
  month: "Apr",
  shanghai: 14.5,
  beijing: 11.3,
  wuhan: 8.4,
  shenzhen: 4.5
}, {
  month: "May",
  shanghai: 18.2,
  beijing: 17.0,
  wuhan: 13.5,
  shenzhen: 7.9
}, {
  month: "Jun",
  shanghai: 21.5,
  beijing: 22.0,
  wuhan: 17.0,
  shenzhen: 9.2
}, {
  month: "Jul",
  shanghai: 25.2,
  beijing: 24.8,
  wuhan: 18.6,
  shenzhen: 12.0
}, {
  month: "Aug",
  shanghai: 26.5,
  beijing: 24.1,
  wuhan: 17.9,
  shenzhen: 14.6
}, {
  month: "Sep",
  shanghai: 23.3,
  beijing: 20.1,
  wuhan: 14.3,
  shenzhen: 14.2
}, {
  month: "Oct",
  shanghai: 18.3,
  beijing: 14.1,
  wuhan: 9.0,
  shenzhen: 13.3
}, {
  month: "Nov",
  shanghai: 13.9,
  beijing: 8.6,
  wuhan: 3.9,
  shenzhen: 10.6
}, {
  month: "Dec",
  shanghai: 9.6,
  beijing: 2.5,
  wuhan: 1.0,
  shenzhen: 8.8
}];
chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChart;
chart.categoryField = "month";
chart.addTitle("每月温度统计", 16, "#274B6D", 1, false);

// AXES
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;

var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.title = "温度(°C)";
valueAxis.titleColor = "#4D759E";
chart.addValueAxis(valueAxis);

// GRAPH
var graph = new AmCharts.AmGraph();
graph.lineColor = "#2F7ED8";
graph.valueField = "shanghai";
graph.bullet = "round";
graph.bulletSize = 4;
graph.lineThickness = 2;
graph.type = "smoothedLine";
chart.addGraph(graph);

graph = new AmCharts.AmGraph();
graph.lineColor = "#0D233A";
graph.valueField = "beijing";
graph.bullet = "round";
graph.bulletSize = 4;
graph.lineThickness = 2;
graph.type = "smoothedLine";
chart.addGraph(graph);

graph = new AmCharts.AmGraph();
graph.lineColor = "#8BBC21";
graph.valueField = "wuhan";
graph.bullet = "round";
graph.bulletSize = 4;
graph.lineThickness = 2;
graph.type = "smoothedLine";
chart.addGraph(graph);

graph = new AmCharts.AmGraph();
graph.lineColor = "#910000";
graph.valueField = "shenzhen";
graph.bullet = "round";
graph.bulletSize = 4;
graph.lineThickness = 2;
graph.type = "smoothedLine";
chart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chart.addChartCursor(chartCursor);

// WRITE
chart.write("splines-amcharts");
ready
highcharts
$('#splines-highcharts').highcharts({
  chart: {
    type: 'spline'
  },
  title: {
    text: '每月温度统计'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: '温度(°C)'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    valueSuffix: '°C'
  },
  plotOptions: {
    spline: {
      marker: {
        symbol: "circle",
        radius: 2
      }
    }
  },
  series: [{
    name: '上海',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: '北京',
    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
  }, {
    name: '武汉',
    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
  }, {
    name: '深圳',
    data: [3.0, 3.2, 2.7, 4.5, 7.9, 9.2, 12.0, 14.6, 14.2, 13.3, 10.6, 8.8]
  }]
});
ready

Revisions

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