4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>Benchmarking for Plots with Many Points
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
14 <p>Plot which can be easily generated with different numbers of points for
15 benchmarking/profiling and improving performance of dygraphs.
</p>
18 <input type=
"radio" id=
"sine" name=
"group1" value=
"sine"
19 onclick=
"setDataType(this);" checked
> sinusoid function
20 <input type=
"radio" id=
"rand" name=
"group1" value=
"rand"
21 onclick=
"setDataType(this);"> random points
<br></p>
23 <input type=
"radio" id=
"aligned" name=
"timestamps" value=
"aligned" checked
> aligned
24 <input type=
"radio" id=
"unaligned" name=
"timestamps" value=
"unaligned"> unaligned
27 <input type=
"radio" id=
"numeric" name=
"x-axis-type" value=
"numeric" onclick=
"setXAxisType(this)" checked
> numeric
28 <input type=
"radio" id=
"dates" name=
"x-axis-type" value=
"date" onclick=
"setXAxisType(this)"> date/time
29 <p><input type=
"checkbox" id=
"fill"><label for=
"fill"> Fill?
</label></p>
30 <p>Number of points per series (points):
31 <input type=
"text" id=
"points" size=
"20"></p>
32 <p>Number of series (series):
33 <input type=
"text" id=
"series" size=
"20"></p>
34 <p>Roll period (in points, rollPeriod):
35 <input type=
"text" id=
"rollPeriod" size=
"20"></p>
36 <p>Repetitions (repititions):
37 <input type=
"text" id=
"repetitions" size=
"20"></p>
38 <input type=
"button" value=
"Go!" onclick=
"updatePlot();">
43 <div id=
"message"></div>
44 <div id=
"metrics"></div>
45 <div id=
"metaperformance"></div>
47 <script type=
"text/javascript">
50 var dataType =
"sine";
51 var timestamps =
"aligned";
55 updatePlot = function() {
56 document.getElementById('message').innerHTML =
"";
57 var plotDiv = document.getElementById('plot');
58 plotDiv.innerHTML = 'Redrawing...';
59 var numeric = document.getElementById('numeric').checked;
61 parseInt(document.getElementById('points').value);
63 parseInt(document.getElementById('series').value);
65 parseInt(document.getElementById('repetitions').value);
68 var xmin = numeric ?
0.0 : Date.parse(
"2014/01/01");
69 var xmax = numeric ?
2.0 * Math.PI : Date.parse(
"2014/12/31");
71 var delta = (xmax - xmin) / (numPoints -
1);
72 var unalignmentDelta = delta / numSeries;
74 for (var i =
0; i < numPoints; ++i) {
75 var x = xmin + delta * i;
77 for (var j =
0; j < numSeries; j++) {
79 if (dataType ==
"rand") {
80 y = Math.pow(Math.random() - Math.random(),
7);
82 y = Math.sin(x + (j * adj));
86 if (timestamps ==
"aligned") {
89 for (var j =
0; j < numSeries; j++) {
90 var elemCopy = elem.slice(
0);
91 elemCopy[
0] += unalignmentDelta * j;
92 data[i*numSeries + j] = elemCopy;
95 if (!numeric) data[i][
0] = new Date(data[i][
0]);
98 for (var j =
0; j < numSeries; j++) {
99 labels.push(
"data-set-" + j);
101 var rollPeriod = parseInt(
102 document.getElementById('rollPeriod').value);
103 var opts = {labels: labels, rollPeriod: rollPeriod, timingName:
"x"};
104 opts['fillGraph'] = document.getElementById('fill').checked;
105 var millisecondss = [];
106 for (var i =
0; i < repetitions; i++) {
108 graph.destroy(); // release memory from prior graph.
110 var start = new Date();
111 graph = new Dygraph(plotDiv, data, opts);
112 var end = new Date();
113 durations.push([numRuns++, end - start]);
114 millisecondss.push(end - start);
116 if (repetitions ==
1) {
117 document.getElementById('message').innerHTML =
118 "completed in " + (end - start) +
" milliseconds.";
121 for (var i =
0; i < millisecondss.length; i++) {
122 avg+=millisecondss[i];
124 avg/=millisecondss.length;
125 document.getElementById('message').innerHTML =
126 "Durations: " + millisecondss +
"<br>Average: " + avg;
129 if (durations.length
> 0) {
130 var start2 = new Date();
132 metrics = new Dygraph(
133 document.getElementById('metrics'),
136 highlightCircleSize:
4,
137 labels: [
"Date",
"ms" ]
140 metrics.updateOptions({file: durations});
142 var end2 = new Date();
143 document.getElementById(
"metaperformance").innerHTML =
144 "completed in " + (end2 - start2) +
" milliseconds.";
147 return millisecondss;
150 setDataType = function(radiobutton) {
151 dataType = radiobutton.value;
153 setTimestampType = function(radiobutton) {
154 timestamps = radiobutton.value;
165 // Parse the URL for parameters. Use it to override the values hash.
166 var href = window.location.href;
167 var qmindex = href.indexOf('?');
169 var entries = href.substr(qmindex +
1).split('&');
170 for (var idx =
0; idx < entries.length; idx++) {
171 var entry = entries[idx];
172 var eindex = entry.indexOf('=');
174 values[entry.substr(
0, eindex)] = entry.substr(eindex +
1);
179 var populate = function(name) {
180 document.getElementById(name).value = values[name];
183 var populateRadio = function(name) {
184 var val = values[name];
185 var elem = document.getElementById(val);
192 populate('rollPeriod');
193 populate('repetitions');
194 populateRadio('type');