ChartsTest

Benchmark created by Vladimir 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>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://sdev007.ucozmedia.com/src/gstoolbar2/js/RGraph.common.core.js"></script>
<script src="http://sdev007.ucozmedia.com/src/gstoolbar2/js/RGraph.pie.js"></script>
<canvas id="myPie" style="width: 400px;height: 300px;padding: 0px; position: relative;"></canvas>

Test runner

Ready to run.

Testing in
TestOps/sec
D3
  Benchmark.prototype.setup = function() {
    console.log('Initializing test');
    
        var pie, arc, svg, path, data,
            width = 200,
            height = 200,
            radius = Math.min(width, height) / 2,
    
            color = d3.scale.category20(),
    
            graph = d3.select('#pieGraph');
    
   
        function setup () {
    
        }
    
        function teardown () {
    
            // svg.remove();
            graph.selectAll('svg').style('display', 'none');
        }
  };

  Benchmark.prototype.teardown = function() {
    teardown();
  };

console.log('Running test');

  data = [{"label":"one", "value":20}, 
            {"label":"two", "value":50}, 
            {"label":"three", "value":30}];

    pie = d3.layout.pie()
        .value(function(d) { return d; })
        .sort(null);

    arc = d3.svg.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 20);

    svg = graph.append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    path = svg.data([data]).selectAll("path")
        .data(pie)
      .enter().append("path")
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc);

    graph.empty();
ready
Amchart
 var chart;
var legend;

var chartData = [
    {
        "country": "one",
        "litres": 20
    },
    {
        "country": "two",
        "litres": 50
    },
    {
        "country": "three",
        "litres": 30
    }
];

AmCharts.ready(function () {
    // PIE CHART
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "country";
    chart.valueField = "litres";
    chart.outlineColor = "#FFFFFF";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;
    chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
    
    // WRITE
    chart.write("chartdiv");
});
ready
HighCharts
$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
      data: [
                ['one',   20],
                ['two',       50],
                ['three',    30]
            ]
        }]
    });
});
    
ready
RGraph
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;
        }       

  var data = [20,30,50];
    
        // Create the Pie chart. The arguments are the canvas ID and the data to be shown.
        var pie = new RGraph.Pie('myPie', data)

            // Configure the chart to look as you want.
            .Set('chart.labels', ['Abc', 'Def', 'Ghi', 'Jkl', 'Mno'])
            .Set('chart.linewidth', 5)
            .Set('chart.stroke', 'white')
        
            // Call the .Draw() chart to draw the Pie chart.
            .Draw();
ready

Revisions

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

  • Revision 1: published by Vladimir on