<!DOCTYPE html>
<html>
<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<title>Benchmarking for Plots with Many Points</title>
<!--[if IE]>
<script type="text/javascript" src="../excanvas.js"></script>
<![endif]-->
- <script type="text/javascript" src="../strftime/strftime-min.js"></script>
- <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
- <script type="text/javascript" src="../dygraph-canvas.js"></script>
- <script type="text/javascript" src="../dygraph.js"></script>
+ <!--
+ For production (minified) code, use:
+ <script type="text/javascript" src="dygraph-combined.js"></script>
+ -->
+ <script type="text/javascript" src="../dygraph-dev.js"></script>
+
</head>
<body>
<p>Plot which can be easily generated with different numbers of points for
benchmarking/profiling and improving performance of dygraphs.</p>
<p>Number of points:
- <input type="text" id="num_points_input" size="20"
- onchange="updatePlot();"></p>
+ <input type="text" id="num_points_input" size="20"></p>
+ <p>Number of series:
+ <input type="text" id="num_series_input" size="20"></p>
<p>Roll period (in points):
- <input type="text" id="roll_period_input" size="20"
- onchange="updatePlot();"></p>
+ <input type="text" id="roll_period_input" size="20"></p>
+ <p>Repetitions:
+ <input type="text" id="repetitions" size="20"></p>
+
+ <input type="button" value="Go!" onclick="updatePlot();">
<br>
<br>
<div id="plot"></div>
+ <div id="message"></div>
+ <div id="metrics"></div>
+ <div id="metaperformance"></div>
<script type="text/javascript">
var plot;
+ var durations = [];
updatePlot = function() {
+ document.getElementById('message').innerHTML = "";
var plotDiv = document.getElementById('plot');
plotDiv.innerHTML = 'Redrawing...';
var numPoints =
parseInt(document.getElementById('num_points_input').value);
+ var numSeries =
+ parseInt(document.getElementById('num_series_input').value);
+ var repetitions =
+ parseInt(document.getElementById('repetitions').value);
+
var data = [];
var xmin = 0.0;
var xmax = 2.0 * Math.PI;
+ var adj = .5;
var delta = (xmax - xmin) / (numPoints - 1);
for (var i = 0; i < numPoints; ++i) {
var x = xmin + delta * i;
- var y = Math.sin(x);
- data[i] = [x, y];
+ var elem = [ x ];
+ for (var j = 0; j < numSeries; j++) {
+ var y = Math.sin(x + (j * adj));
+ elem.push(y);
+ }
+ data[i] = elem;
+ }
+ var labels = [ "x" ];
+ for (var j = 0; j < numSeries; j++) {
+ labels.push("sin(x + " + (j*adj) + ")");
}
-
var rollPeriod = parseInt(
document.getElementById('roll_period_input').value);
- var opts = {labels: ['x', 'sin(x)'], rollPeriod: rollPeriod};
- plot = new Dygraph(plotDiv, data, opts);
+ var opts = {labels: labels, rollPeriod: rollPeriod};
+ var millisecondss = [];
+ for (var i = 0; i < repetitions; i++) {
+ var start = new Date();
+ plot = new Dygraph(plotDiv, data, opts);
+ var end = new Date();
+ durations.push([start, end - start]);
+ millisecondss.push(end - start);
+ }
+ if (repetitions == 1) {
+ document.getElementById('message').innerHTML =
+ "completed in " + (end - start) + " milliseconds.";
+ } else {
+ document.getElementById('message').innerHTML =
+ "Durations: " + millisecondss;
+ }
+
+ if (durations.length > 0) {
+ var start2 = new Date();
+ new Dygraph(
+ document.getElementById('metrics'),
+ durations,
+ {
+ highlightCircleSize: 4,
+ labels: [ "Date", "ms" ]
+ });
+ var end2 = new Date();
+ document.getElementById("metaperformance").innerHTML =
+ "completed in " + (end2 - start2) + " milliseconds.";
+ }
};
document.getElementById('num_points_input').value = '100';
+ document.getElementById('num_series_input').value = '1';
document.getElementById('roll_period_input').value = '1';
- updatePlot();
+ document.getElementById('repetitions').value = '1';
</script>
</body>
</html>
projects / dygraphs.git / blobdiff