jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Using some sample code from here and from the sample of 8 chart librairies ti make comparison: morris, canvasjs, google tool charts, d3, flotr2, dojogfx, dygraph.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined.js" charset="utf-8"></script>
<script src="http://dojotoolkit.org/reference-guide/1.10/_static/js/dojo/dojo.js" charset="utf-8"></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 src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bean/1.0.15/bean.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/HumbleSoftware/Flotr2/master/flotr2.amd.js" charset="utf-8"></script>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<div id="chart1" style="width:400px;height:300px"></div>
<canvas id="chart2" height="300" width="400"></canvas>
<div id="chart3" style="width:400px;height:300px"></div>
<svg id="d3"></svg>
<div id="simplechart" style="width: 400px; height: 300px; margin: 5px auto 0px auto;"></div>
<div id="graphdiv1" style="height: 300px; width: 400px;"></div>
<div class="render" id="chart7" style="position: relative; width: 400px; height: 300px; margin: 12px auto 18px auto;"></div>
<div id="chart8" style="width: 400px; height: 300px"></div>var data1 = {
data: [{
type: "splineArea",
color: "rgba(54,158,173,.7)",
dataPoints: [{
x: new Date(1992, 0),
y: 2506000
}, {
x: new Date(1993, 0),
y: 2798000
}, {
x: new Date(1994, 0),
y: 3386000
}, {
x: new Date(1995, 0),
y: 6944000
}, {
x: new Date(1996, 0),
y: 6026000
}, {
x: new Date(1997, 0),
y: 2394000
}, {
x: new Date(1998, 0),
y: 1872000
}, {
x: new Date(1999, 0),
y: 2140000
}, {
x: new Date(2000, 0),
y: 7289000
}, {
x: new Date(2001, 0),
y: 4830000
}, {
x: new Date(2002, 0),
y: 2009000
}, {
x: new Date(2003, 0),
y: 2840000
}, {
x: new Date(2004, 0),
y: 2396000
}, {
x: new Date(2005, 0),
y: 1613000
}, {
x: new Date(2006, 0),
y: 2821000
}, {
x: new Date(2007, 0),
y: 2000000
}, {
x: new Date(2008, 0),
y: 1397000
}]
}]
}
var data2 = [
{"y": 1996,"a": 2506000 },
{"y": 1997,"a": 2798000 },
{"y": 1998,"a": 3386000 },
{"y": 1999,"a": 6944000 },
{"y": 2000,"a": 6026000 },
{"y": 2001,"a": 2394000 },
{"y": 2002,"a": 1872000 },
{"y": 2003,"a": 2140000 },
{"y": 2004,"a": 7289000 },
{"y": 2005,"a": 4830000 },
{"y": 2006,"a": 2009000 },
{"y": 2007,"a": 2840000 },
{"y": 2008,"a": 2396000 },
{"y": 2009,"a": 1613000 },
{"y": 2010,"a": 2821000 },
{"y": 2011,"a": 2000000 },
{"y": 2012,"a": 1397000}]
var data3 = [
[ "1992-01-01", 2505999 ],
[ "1993-01-01", 2798000 ],
[ "1994-01-01", 3386000 ],
[ "1995-01-01", 6944000 ],
[ "1996-01-01", 6026000 ],
[ "1997-01-01", 2394000 ],
[ "1998-01-01", 1872000 ],
[ "1999-01-01", 2140000 ],
[ "2000-01-01", 7289000 ],
[ "2001-01-01", 4830000 ],
[ "2002-01-01", 2009000 ],
[ "2003-01-01", 2840000 ],
[ "2004-01-01", 2396000 ],
[ "2005-01-01", 1613000 ],
[ "2006-01-01", 2821000 ],
[ "2007-01-01", 2000000 ],
[ "2008-01-01", 1397000 ]
]
var data5 = [2505999, 2798000, 3386000, 6944000, 6026000, 2394000, 1872000, 2140000, 7289000, 4830000, 2009000, 2840000, 2396000, 1613000, 2821000, 2000000, 1397000 ]
var data6 = "Year, Population \n" +
"1996, 2506000 \n" +
"1997, 2798000 \n" +
"1998, 3386000 \n" +
"1999, 6944000 \n" +
"2000, 6026000 \n" +
"2001, 2394000 \n" +
"2002, 1872000 \n" +
"2003, 2140000 \n" +
"2004, 7289000 \n" +
"2005, 4830000 \n" +
"2006, 2009000 \n" +
"2007, 2840000 \n" +
"2008, 2396000 \n" +
"2009, 1613000 \n" +
"2010, 2821000 \n" +
"2011, 2000000 \n" +
"2012, 1397000"
var data7 = [
[ new Date(1992, 0).getTime(),2506000 ],
[ new Date(1993, 0).getTime(), 2798000 ],
[ new Date(1994, 0).getTime(), 3386000 ],
[ new Date(1995, 0).getTime(), 6944000 ],
[ new Date(1996, 0).getTime(), 6026000 ],
[ new Date(1997, 0).getTime(), 2394000 ],
[ new Date(1998, 0).getTime(), 1872000 ],
[ new Date(1999, 0).getTime(), 2140000 ],
[ new Date(2000, 0).getTime(), 7289000 ],
[ new Date(2001, 0).getTime(), 4830000 ],
[ new Date(2002, 0).getTime(), 2009000 ],
[ new Date(2003, 0).getTime(), 2840000 ],
[ new Date(2004, 0).getTime(), 2396000 ],
[ new Date(2005, 0).getTime(), 1613000 ],
[ new Date(2006, 0).getTime(), 2821000 ],
[ new Date(2007, 0).getTime(), 2000000 ],
[ new Date(2008, 0).getTime(), 1397000 ]
]
var data8 = google.visualization.arrayToDataTable([
['Year', 'Population'],
[ '1992',2506000 ],
[ '1993', 2798000 ],
[ '1994', 3386000 ],
[ '1995', 6944000 ],
[ '1996', 6026000 ],
[ '1997', 2394000 ],
[ '1998', 1872000 ],
[ '1999', 2140000 ],
[ '2000', 7289000 ],
[ '2001', 4830000 ],
[ '2002', 2009000 ],
[ '2003', 2840000 ],
[ '2004', 2396000 ],
[ '2005', 1613000 ],
[ '2006', 2821000 ],
[ '2007', 2000000 ],
[ '2008', 1397000 ]
]);
function canvasJSDraw() {
return;
var chart = new CanvasJS.Chart("chart1", data1);
chart.render();
};
function morrisDraw() {
return;
Morris.Area({
element: 'chart3',
data: data2,
xkey: 'y',
ykeys: ['a'],
labels: ['Series A', ]
})
};
function dThreeDraw() {
return;
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 400 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
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 + ")");
var data = data3.map(function(d) {
return {
date: parseDate(d[0]),
close: d[1]
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.close; }));
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("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
};
function googleChartToolDraw() {
return;
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart8'));
chart.draw(data8, options);
};
function flotrTwoDraw() {
return;
var container = document.getElementById("chart7");
var i, graph;
// Draw Graph
graph = Flotr.draw(container, [data7], {
xaxis: {
mode: 'time'
//minorTickFreq: 4
},
grid: {
minorVerticalLines: true
}
});
}
function dygraphsDraw() {
return;
g1 = new Dygraph(document.getElementById("graphdiv1"),
data6);
}Ready to run.
| Test | Ops/sec | |
|---|---|---|
| canvasjs | | ready |
| morris | | ready |
| d3.js | | ready |
| google chart tool | | ready |
| flotr2 | | ready |
| dygraph | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.