4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>Benchmarking for Plots with Many Points
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
10 <p>Plot which can be easily generated with different numbers of points for
11 benchmarking/profiling and improving performance of dygraphs.
</p>
14 <input type=
"radio" id=
"sine" name=
"group1" value=
"sine"
15 onclick=
"setDataType(this);" checked
> sinusoid function
16 <input type=
"radio" id=
"rand" name=
"group1" value=
"rand"
17 onclick=
"setDataType(this);"> random points
<br></p>
19 <input type=
"radio" id=
"aligned" name=
"timestamps" value=
"aligned" checked
> aligned
20 <input type=
"radio" id=
"unaligned" name=
"timestamps" value=
"unaligned"> unaligned
23 <input type=
"radio" id=
"numeric" name=
"x-axis-type" value=
"numeric" onclick=
"setXAxisType(this)" checked
> numeric
24 <input type=
"radio" id=
"dates" name=
"x-axis-type" value=
"date" onclick=
"setXAxisType(this)"> date/time
25 <p><input type=
"checkbox" id=
"fill"><label for=
"fill"> Fill?
</label></p>
26 <p>Number of points per series (points):
27 <input type=
"text" id=
"points" size=
"20"></p>
28 <p>Number of series (series):
29 <input type=
"text" id=
"series" size=
"20"></p>
30 <p>Roll period (in points, rollPeriod):
31 <input type=
"text" id=
"rollPeriod" size=
"20"></p>
32 <p>Repetitions (repititions):
33 <input type=
"text" id=
"repetitions" size=
"20"></p>
34 <input type=
"button" value=
"Go!" onclick=
"updatePlot();">
39 <div id=
"message"></div>
40 <div id=
"metrics"></div>
41 <div id=
"metaperformance"></div>
43 <script type=
"text/javascript">
46 var dataType =
"sine";
47 var timestamps =
"aligned";
51 updatePlot = function() {
52 document.getElementById('message').innerHTML =
"";
53 var plotDiv = document.getElementById('plot');
54 plotDiv.innerHTML = 'Redrawing...';
55 var numeric = document.getElementById('numeric').checked;
57 parseInt(document.getElementById('points').value);
59 parseInt(document.getElementById('series').value);
61 parseInt(document.getElementById('repetitions').value);
64 var xmin = numeric ?
0.0 : Date.parse(
"2014/01/01");
65 var xmax = numeric ?
2.0 * Math.PI : Date.parse(
"2014/12/31");
67 var delta = (xmax - xmin) / (numPoints -
1);
68 var unalignmentDelta = delta / numSeries;
70 for (var i =
0; i < numPoints; ++i) {
71 var x = xmin + delta * i;
73 for (var j =
0; j < numSeries; j++) {
75 if (dataType ==
"rand") {
76 y = Math.pow(Math.random() - Math.random(),
7);
78 y = Math.sin(x + (j * adj));
82 if (timestamps ==
"aligned") {
85 for (var j =
0; j < numSeries; j++) {
86 var elemCopy = elem.slice(
0);
87 elemCopy[
0] += unalignmentDelta * j;
88 data[i*numSeries + j] = elemCopy;
91 if (!numeric) data[i][
0] = new Date(data[i][
0]);
94 for (var j =
0; j < numSeries; j++) {
95 labels.push(
"data-set-" + j);
97 var rollPeriod = parseInt(
98 document.getElementById('rollPeriod').value);
99 var opts = {labels: labels, rollPeriod: rollPeriod, timingName:
"x"};
100 opts['fillGraph'] = document.getElementById('fill').checked;
101 var millisecondss = [];
102 for (var i =
0; i < repetitions; i++) {
104 graph.destroy(); // release memory from prior graph.
106 var start = new Date();
107 graph = new Dygraph(plotDiv, data, opts);
108 var end = new Date();
109 durations.push([numRuns++, end - start]);
110 millisecondss.push(end - start);
112 if (repetitions ==
1) {
113 document.getElementById('message').innerHTML =
114 "completed in " + (end - start) +
" milliseconds.";
117 for (var i =
0; i < millisecondss.length; i++) {
118 avg+=millisecondss[i];
120 avg/=millisecondss.length;
121 document.getElementById('message').innerHTML =
122 "Durations: " + millisecondss +
"<br>Average: " + avg;
125 if (durations.length
> 0) {
126 var start2 = new Date();
128 metrics = new Dygraph(
129 document.getElementById('metrics'),
132 highlightCircleSize:
4,
133 labels: [
"Date",
"ms" ]
136 metrics.updateOptions({file: durations});
138 var end2 = new Date();
139 document.getElementById(
"metaperformance").innerHTML =
140 "completed in " + (end2 - start2) +
" milliseconds.";
143 return millisecondss;
146 setDataType = function(radiobutton) {
147 dataType = radiobutton.value;
149 setTimestampType = function(radiobutton) {
150 timestamps = radiobutton.value;
161 // Parse the URL for parameters. Use it to override the values hash.
162 var href = window.location.href;
163 var qmindex = href.indexOf('?');
165 var entries = href.substr(qmindex +
1).split('&');
166 for (var idx =
0; idx < entries.length; idx++) {
167 var entry = entries[idx];
168 var eindex = entry.indexOf('=');
170 values[entry.substr(
0, eindex)] = entry.substr(eindex +
1);
175 var populate = function(name) {
176 document.getElementById(name).value = values[name];
179 var populateRadio = function(name) {
180 var val = values[name];
181 var elem = document.getElementById(val);
188 populate('rollPeriod');
189 populate('repetitions');
190 populateRadio('type');