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
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<style>
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script src="http://ebuilders.in/flotr2.min.js" charset="utf-8" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<h2>HighCharts</h2>
<div id="highChart" style="width: 600px; height: 400px;"></div>
<h2>Chart.js</h2>
<canvas id="chartJS" width="600" height="400"></canvas>
<h2>ZingCharts</h2>
<div id="zingChart" width="600" height="400"></div>
<h2>Chartist.js</h2>
<div id="chartist" class="ct-chart" width="600" height="300"></div>
<!--
<h2>Morris.js</h2>
<div id="morris" style="width: 600px; height: 400px;"></div>
-->
<h2>Flotr2</h2>
<div class="render" id="flotr2" style="position: relative; width: 400px; height: 300px; margin: 12px auto 18px auto;"></div>
<div id="chartNVD3" style="width: 600px; height: 400px;">
<svg></svg>
</div>var masterData1 = [11, 36, 7, 44, 11, 28, 42, 26, 13, 32, 12, 24, 16, 11, 43, 39];
var masterData2 = [
{
x: 1,
y: masterData1[0]
},
{
x: 2,
y: masterData1[1]
},
{
x: 3,
y: masterData1[2]
},
{
x: 4,
y: masterData1[3]
},
{
x: 5,
y: masterData1[4]
},
{
x: 6,
y: masterData1[5]
},
{
x: 7,
y: masterData1[6]
},
{
x: 8,
y: masterData1[7]
},
{
x: 9,
y: masterData1[8]
},
{
x: 10,
y: masterData1[9]
},
{
x: 11,
y: masterData1[10]
},
{
x: 12,
y: masterData1[11]
},
{
x: 13,
y: masterData1[12]
},
{
x: 14,
y: masterData1[13]
},
{
x: 15,
y: masterData1[14]
},
{
x: 16,
y: masterData1[15]
}
];
var masterData3 = [[1, 11], [2, 36], [3, 7], [4, 44], [5, 11], [6, 28], [7, 42], [8, 26], [9, 13], [10, 32], [11, 12], [12, 24], [13, 16], [14, 11], [15, 43], [16, 39]];
//////////////////////
//////////////////////
// highcharts.js
//////////////////////
//////////////////////
var drawHighCharts = function () {
//var $div = $('<div />').appendTo('body');
//$div.attr('id', 'highChart');
//$div.css({ 'width': '600px', 'height': '400px' });
$('#highChart').highcharts({
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
line: {
animation: false
}
},
legend: {
enable: false
},
series: [{
data: masterData1
}]
});
//$('#highChart').remove();
};
//////////////////////
//////////////////////
// charts.js
//////////////////////
//////////////////////
var drawChartJS = function () {
//var $div = $('<canvas />').appendTo('body');
//$div.attr('id', 'chartJS');
//$div.attr('width', 600);
//$div.attr('height', 400);
var ctx = $("#chartJS").get(0).getContext("2d");
var options = {
// turns animation off
animation: false,
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - Whether the line is curved between points
bezierCurve: false,
//Number - Tension of the bezier curve between points
bezierCurveTension: 0.4,
//Boolean - Whether to show a dot for each point
pointDot: true,
//Number - Radius of each point dot in pixels
pointDotRadius: 4,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth: 1,
//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
pointHitDetectionRadius: 20,
//Boolean - Whether to show a stroke for datasets
datasetStroke: true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth: 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill: true
};
var data = {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
datasets: [
{
label: "Sample",
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: masterData1
}
]
};
var myLineChart = new Chart(ctx).Line(data, options);
//$('#chartJS').remove();
};
//////////////////////
//////////////////////
//Flotr2
/////////////////////
////////////////////
function flotrTwoDraw() {
var container = document.getElementById("flotr2");
var i, graph;
// Draw Graph
graph = Flotr.draw(container, [masterData3], {
xaxis: {
mode: 'time'
},
grid: {
minorVerticalLines: true
}
});
}
//////////////////////
//////////////////////
// nvd3.js
//////////////////////
//////////////////////
var drawChartNVD3 = function () {
//var $div = $('<svg />').appendTo('body');
//$div.attr('id', 'chartNVD3');
//$div.css({ 'width': '600px', 'height': '400px' });
/*These lines are all chart setup. Pick and choose which chart features you want to utilize. */
nv.addGraph(function () {
var chart = nv.models.lineChart()
.width(600)
.height(400)
.margin({ left: 50 }) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true); //Show the x-axis
chart.xAxis //Chart x-axis settings
.axisLabel('X')
.tickFormat(d3.format(',r'));
chart.yAxis //Chart y-axis settings
.axisLabel('Y')
.tickFormat(d3.format('.02f'));
/* Done setting the chart up? Time to render it!*/
var myData = [
{
values: masterData2, //values - represents the array of {x,y} data points
key: 'Apples', //key - the name of the series.
color: '#ff7f0e' //color - optional: choose your own line color.
}
];
d3.select('#chartNVD3 svg') //Select the <svg> element you want to render the chart in.
.datum(myData) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
//Update the chart when window resizes.
nv.utils.windowResize(function () {
chart.update()
});
deferred.resolve();
return chart;
});
};
//////////////////////
//////////////////////
// zingchart
//////////////////////
//////////////////////
var drawZingChart = function () {
//var $div = $('<div />').appendTo('body');
//$div.attr('id', 'zingChart');
//$div.attr('width', 600);
//$div.attr('height', 400);
var chartData = {
type: 'line',
series: [
{
values: masterData1
}
]
};
zingchart.render({
id: 'zingChart',
height: 400,
width: 600,
data: chartData,
events: {
complete: function() {
deferred.resolve();
}
}
});
//$('#zingChart').remove();
};
//////////////////////
//////////////////////
// chartist.js
//////////////////////
//////////////////////
var drawChartist = function () {
//var $div = $('<div />').appendTo('body');
//$div.attr('id', 'chartist');
//$div.attr('width', 600);
//$div.attr('height', 400);
//$div.attr('class', 'ct-chart');
new Chartist.Line('#chartist',
{
labels: ['1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012'],
series: [
masterData1
]
},
{
width: 600,
height: 400
}
).on('created', function() {deferred.resolve();});
//$('#chartist').remove();
};
//////////////////////
//////////////////////
// morris.js
//////////////////////
//////////////////////
var drawMorris = function () {
var $div = $('<div />').appendTo('body');
$div.attr('id', 'morris');
$div.css({ 'width': '600px', 'height': '400px' });
Morris.Line({
// ID of the element in which to draw the chart.
element: 'morris',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: masterData2,
// The name of the data record attribute that contains x-values.
xkey: 'x',
// A list of names of data record attributes that contain y-values.
ykeys: ['y'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});
$('#morris').remove();
};Ready to run.
| Test | Ops/sec | |
|---|---|---|
| HighCharts | | ready |
| NVD3.js | | ready |
| ZingCharts | | ready |
| Chart.js | | ready |
| Morris.js | | ready |
| Chartist.js | | ready |
| Flotr2 | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.