charts comparison(d3.js,kendo,highcharts,echart,flot,gRaphael,fusioncharts,chart.js) (v3)

Revision 3 of this benchmark created by wayou on

Description

performance comparison of popular javascript chart library d3.js,kendo,highcharts,echart,flot,gRaphael,fusioncharts,chart.js

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>


<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/2173541171/echarts-plain.js"></script>


<script type="text/javascript" src="http://yourjavascript.com/1434737516/fusioncharts.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1643405713/fusioncharts-charts.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/7712153340/fusioncharts-theme-fint.js"></script>

<div id="highcharts"></div>
<div id="kendo"></div>
<svg id="d3"></svg>
<div id="echart" style="height:400px"></div>

<div id="flot"></div>
<div id="gRaphael"></div>
<div id="fusioncharts"></div>
<canvas id="chartjs" width="900" height="500"></canvas>

Setup

var data = [{
      name: 'Year 1800',
      data: [107, 31, 635, 203, 2]
    }, {
      name: 'Year 1900',
      data: [133, 156, 947, 408, 6]
    }, {
      name: 'Year 2008',
      data: [973, 914, 4054, 732, 34]
    }];

Test runner

Ready to run.

Testing in
TestOps/sec
highcharts
//code for highcharts
$('#highcharts').highcharts({
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: Wikipedia.org'
  },
  xAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Population (millions)',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: data
});
ready
kendo ui
//code for kendo 
$("#kendo").kendoChart({
  title: {
    text: "Historic World Population by Region"
  },
  legend: {
    position: "top"
  },
  seriesDefaults: {
    type: "bar"
  },
  series: data.reverse(),
  valueAxis: {
    labels: {
      format: "{0}%"
    },
    line: {
      visible: false
    },
    axisCrossingValue: 0
  },
  categoryAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    line: {
      visible: false
    },
    labels: {
      padding: {
        top: 0
      }
    }
  },
  tooltip: {
    visible: true,
    format: "{0}%",
    template: "#= series.name #: #= value #"
  }
});
ready
d3.js
//code for d3

var data = [{
  "State": "Africa",
  "Year 1800": 107,
  "Year 1900": 133,
  "Year 2008": 973
}, {
  "State": "America",
  "Year 1800": 31,
  "Year 1900": 156,
  "Year 2008": 914
}, {
  "State": "Asia",
  "Year 1800": 635,
  "Year 1900": 947,
  "Year 2008": 4054
}, {
  "State": "Europe",
  "Year 1800": 203,
  "Year 1900": 408,
  "Year 2008": 732
}, {
  "State": "Oceania",
  "Year 1800": 2,
  "Year 1900": 6,
  "Year 2008": 34
}];

var margin = {
  top: 20,
  right: 20,
  bottom: 30,
  left: 40
},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
  .range([height, 0]);

var color = d3.scale.ordinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
  .scale(x0)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickFormat(d3.format(".2s"));

var svg = d3.select("#d3")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//d3 stuff
var ageNames = d3.keys(data[0]).filter(function(key) {
  return key !== "State";
});

data.forEach(function(d) {
  d.ages = ageNames.map(function(name) {
    return {
      name: name,
      value: +d[name]
    };
  });
});

x0.domain(data.map(function(d) {
  return d.State;
}));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data, function(d) {
  return d3.max(d.ages, function(d) {
    return d.value;
  });
})]);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Population");

var state = svg.selectAll(".state")
  .data(data)
  .enter().append("g")
  .attr("class", "g")
  .attr("transform", function(d) {
    return "translate(" + x0(d.State) + ",0)";
  });

state.selectAll("rect")
  .data(function(d) {
    return d.ages;
  })
  .enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) {
    return x1(d.name);
  })
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("height", function(d) {
    return height - y(d.value);
  })
  .style("fill", function(d) {
    return color(d.name);
  });

var legend = svg.selectAll(".legend")
  .data(ageNames.slice().reverse())
  .enter().append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) {
    return "translate(0," + i * 20 + ")";
  });

legend.append("rect")
  .attr("x", width - 18)
  .attr("width", 18)
  .attr("height", 18)
  .style("fill", color);

legend.append("text")
  .attr("x", width - 24)
  .attr("y", 9)
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) {
    return d;
  });
ready
echart
//code for echart
var option = {
  title: {
    text: 'Historic World Population by Region',
    subtext: ''
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Year 1800', 'Year 1900', 'Year 2008']
  },
  toolbox: {
    show: true,
    feature: {
      mark: {
        show: true
      },
      dataView: {
        show: true,
        readOnly: false
      },
      magicType: {
        show: true,
        type: ['line', 'bar']
      },
      restore: {
        show: true
      },
      saveAsImage: {
        show: true
      }
    }
  },
  calculable: true,
  xAxis: [{
    type: 'value',
    boundaryGap: [0, 0.01]
  }],
  yAxis: [{
    type: 'category',
    data: ["Oceania", "Europe", "Asia", "America", "Africa"]
  }],
  series: [{
    name: 'Year 1800',
    type: 'bar',
    data: [107, 31, 635, 203, 2].reverse()
  }, {
    name: 'Year 1900',
    type: 'bar',
    data: [133, 156, 947, 408, 6].reverse()
  }, {
    name: 'Year 2008',
    type: 'bar',
    data: [973, 914, 4054, 732, 34].reverse()
  }]
};


var myChart = echarts.init(document.getElementById('echart'));

myChart.setOption(option);
ready
fusioncharts
//code fusioncharts
var revenueChart = new FusionCharts({
  type: 'msbar2d',
  renderAt: 'fusioncharts',
  width: '900',
  height: '400',
  dataFormat: 'json',
  dataSource: {
    "chart": {
      "caption": "Historic World Population by Region",
      "subCaption": "",
      "xAxisname": "year",
      "yAxisName": "population",
      "numberPrefix": "$",
      "theme": "fint",
      //Cosmetics for legend
      "legendBgColor": "#CCCCCC",
      "legendBgAlpha": "20",
      "legendBorderColor": "#666666",
      "legendBorderThickness": "1",
      "legendBorderAlpha": "40",
      "legendShadow": "1"
    },
    "categories": [{
      "category": [{
        "label": "Africa"
      }, {
        "label": "America"
      }, {
        "label": "Asia"
      }, {
        "label": "Europe"
      }, {
        "label": "Oceania"
      }]
    }],
    "dataset": [{
      "seriesname": "Year 1800",
      "data": [{
        "value": "107"
      }, {
        "value": "31"
      }, {
        "value": "635"
      }, {
        "value": "203"
      }, {
        "value": "2"
      }]
    }, {

      "seriesname": "Year 1900",
      "data": [{
        "value": "133"
      }, {
        "value": "156"
      }, {
        "value": "947"
      }, {
        "value": "408"
      }, {
        "value": "6"
      }]
    }, {

      "seriesname": "Year 2008",
      "data": [{
        "value": "937"
      }, {
        "value": "914"
      }, {
        "value": "4054"
      }, {
        "value": "732"
      }, {
        "value": "34"
      }]
    }].reverse()
  }
}).render();
ready
chart.js
//code for chartjs

var ctx = $("#chartjs").get(0).getContext("2d");
var chartjsdata = {
  labels: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
  datasets: [{
    label: 'Year 1900',
    fillColor: "rgba(220,220,220,0.5)",
    strokeColor: "rgba(220,220,220,0.8)",
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data: [107, 31, 635, 203, 2]
  }, {
    label: 'Year 1900',
    fillColor: "rgba(151,187,205,0.5)",
    strokeColor: "rgba(151,187,205,0.8)",
    highlightFill: "rgba(151,187,205,0.75)",
    highlightStroke: "rgba(151,187,205,1)",
    data: [133, 156, 947, 408, 6]
  }, {
    label: 'Year 2008',
    fillColor: "rgba(151,187,205,0.5)",
    strokeColor: "rgba(151,187,205,0.8)",
    highlightFill: "rgba(151,187,205,0.75)",
    highlightStroke: "rgba(151,187,205,1)",
    data: [973, 914, 4054, 732, 34]
  }]
};
var myBarChart = new Chart(ctx).Bar(chartjsdata);
ready

Revisions

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

  • Revision 1: published by charts comparison(d3.js,kendo,highcharts,echart,flot,gRaphael,fusioncharts,chart.js) on
  • Revision 2: published by wayou on
  • Revision 3: published by wayou on
  • Revision 4: published by jqplot test on
  • Revision 5: published on
  • Revision 6: published on
  • Revision 7: published on