Single Line Chart(amcharts/highcharts) (v3)

Revision 3 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="line-amcharts" style="width:800px; height:400px; margin:0 auto;"></div>
<div id="line-highcharts" style="width:800px; height:400px; margin:0 auto;"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
amcharts
var lineChart = [{
  month: "Jan",
  value: 7.0
}, {
  month: "Feb",
  value: 6.9
}, {
  month: "Mar",
  value: 9.5
}, {
  month: "Apr",
  value: 14.5
}, {
  month: "May",
  value: 18.2
}, {
  month: "Jun",
  value: 21.5
}, {
  month: "Jul",
  value: 25.2
}, {
  month: "Aug",
  value: 26.5
}, {
  month: "Sep",
  value: 23.3
}, {
  month: "Oct",
  value: 18.3
}, {
  month: "Nov",
  value: 13.9
}, {
  month: "Dec",
  value: 9.6
}];
chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChart;
chart.categoryField = "month";
chart.addTitle("AmCharts单曲线图", 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 = "value";
graph.bullet = "round";
graph.lineThickness = 2;
chart.addGraph(graph);

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

// WRITE
chart.write("line-amcharts");
ready
highcharts
$('#line-highcharts').highcharts({
  chart: {
    type: 'line'
  },
  title: {
    text: 'HighCharts单曲线图'
  },
  legend: {
    enabled: false
  },
  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'
  },
  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]
  }]
});
ready

Revisions

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