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, chartjs.
<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>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></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>
<canvas id="chart10" width="400" height="300"></canvas>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]
]);
var data10 = {
labels: [1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [2506000, 2798000, 3386000, 6944000, 6026000, 2394000, 1872000, 2140000, 7289000, 4830000, 2009000, 2840000, 2396000, 1613000, 2821000, 2000000, 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);
}
function chartJSDraw() {
return;
var options = null;
var ctx = document.getElementById("chart10").getContext("2d");
var myLineChart = new Chart(ctx).Line(data10, options);
}Ready to run.
| Test | Ops/sec | |
|---|---|---|
| canvasjs | | ready |
| morris | | ready |
| d3.js | | ready |
| google chart tool | | ready |
| flotr2 | | ready |
| dygraph | | ready |
| chartjs | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.