ChartsTest (v2)

Revision 2 of this benchmark created by Luisa on


Preparation HTML

<div id="pieGraph"></div>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></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
D3

    
        var pie, arc, svg, path, data,
    
            data10 = getData(10),
            data100 = getData(100),
    
            width = 200,
            height = 200,
            radius = Math.min(width, height) / 2,
    
            color = d3.scale.category20(),
    
            graph = d3.select('#pieGraph');
    
        function getData (indices) {
            var Floor = Math.floor,
            Rand = Math.random,
            arr = [];
    
            for (var i = indices - 1; i >= 0; i--) {
                arr.push(Floor((Rand() * 10) + 1));
            }
    
            return arr;
        }
    
        function setup () {
    
        }
    
        function teardown () {
    
            // svg.remove();
            graph.selectAll('svg').style('display', 'none');
        }


  Benchmark.prototype.teardown = function() {
    teardown();
  };
 
ready
Amchart
 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

Revisions

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

  • Revision 2: published by Luisa on