4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Benchmarking for Plots with Many Points
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
10 For production (minified) code, use:
11 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
13 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
17 <p>Plot which can be easily generated with different numbers of points for
18 benchmarking/profiling and improving performance of dygraphs.
</p>
21 <input type=
"radio" id=
"sine" name=
"group1" value=
"sine"
22 onclick=
"setDataType(this);" checked
> sinusoid function
23 <input type=
"radio" id=
"rand" name=
"group1" value=
"rand"
24 onclick=
"setDataType(this);"> random points
<br></p>
26 <input type=
"radio" id=
"aligned" name=
"timestamps" value=
"aligned" checked
> aligned
27 <input type=
"radio" id=
"unaligned" name=
"timestamps" value=
"unaligned"> unaligned
30 <input type=
"radio" id=
"numeric" name=
"x-axis-type" value=
"numeric" onclick=
"setXAxisType(this)" checked
> numeric
31 <input type=
"radio" id=
"dates" name=
"x-axis-type" value=
"date" onclick=
"setXAxisType(this)"> date/time
32 <p><input type=
"checkbox" id=
"fill"><label for=
"fill"> Fill?
</label></p>
33 <p>Number of points per series (points):
34 <input type=
"text" id=
"points" size=
"20"></p>
35 <p>Number of series (series):
36 <input type=
"text" id=
"series" size=
"20"></p>
37 <p>Roll period (in points, rollPeriod):
38 <input type=
"text" id=
"rollPeriod" size=
"20"></p>
39 <p>Repetitions (repititions):
40 <input type=
"text" id=
"repetitions" size=
"20"></p>
41 <input type=
"button" value=
"Go!" onclick=
"updatePlot();">
46 <div id=
"message"></div>
47 <div id=
"metrics"></div>
48 <div id=
"metaperformance"></div>
50 <script type=
"text/javascript">
53 var dataType =
"sine";
54 var timestamps =
"aligned";
58 updatePlot = function() {
59 document.getElementById('message').innerHTML =
"";
60 var plotDiv = document.getElementById('plot');
61 plotDiv.innerHTML = 'Redrawing...';
62 var numeric = document.getElementById('numeric').checked;
64 parseInt(document.getElementById('points').value);
66 parseInt(document.getElementById('series').value);
68 parseInt(document.getElementById('repetitions').value);
71 var xmin = numeric ?
0.0 : Date.parse(
"2014/01/01");
72 var xmax = numeric ?
2.0 * Math.PI : Date.parse(
"2014/12/31");
74 var delta = (xmax - xmin) / (numPoints -
1);
75 var unalignmentDelta = delta / numSeries;
77 for (var i =
0; i < numPoints; ++i) {
78 var x = xmin + delta * i;
80 for (var j =
0; j < numSeries; j++) {
82 if (dataType ==
"rand") {
83 y = Math.pow(Math.random() - Math.random(),
7);
85 y = Math.sin(x + (j * adj));
89 if (timestamps ==
"aligned") {
92 for (var j =
0; j < numSeries; j++) {
93 var elemCopy = elem.slice(
0);
94 elemCopy[
0] += unalignmentDelta * j;
95 data[i*numSeries + j] = elemCopy;
98 if (!numeric) data[i][
0] = new Date(data[i][
0]);
100 var labels = [
"x" ];
101 for (var j =
0; j < numSeries; j++) {
102 labels.push(
"data-set-" + j);
104 var rollPeriod = parseInt(
105 document.getElementById('rollPeriod').value);
106 var opts = {labels: labels, rollPeriod: rollPeriod, timingName:
"x"};
107 opts['fillGraph'] = document.getElementById('fill').checked;
108 var millisecondss = [];
109 for (var i =
0; i < repetitions; i++) {
111 graph.destroy(); // release memory from prior graph.
113 var start = new Date();
114 graph = new Dygraph(plotDiv, data, opts);
115 var end = new Date();
116 durations.push([numRuns++, end - start]);
117 millisecondss.push(end - start);
119 if (repetitions ==
1) {
120 document.getElementById('message').innerHTML =
121 "completed in " + (end - start) +
" milliseconds.";
124 for (var i =
0; i < millisecondss.length; i++) {
125 avg+=millisecondss[i];
127 avg/=millisecondss.length;
128 document.getElementById('message').innerHTML =
129 "Durations: " + millisecondss +
"<br>Average: " + avg;
132 if (durations.length
> 0) {
133 var start2 = new Date();
135 metrics = new Dygraph(
136 document.getElementById('metrics'),
139 highlightCircleSize:
4,
140 labels: [
"Date",
"ms" ]
143 metrics.updateOptions({file: durations});
145 var end2 = new Date();
146 document.getElementById(
"metaperformance").innerHTML =
147 "completed in " + (end2 - start2) +
" milliseconds.";
150 return millisecondss;
153 setDataType = function(radiobutton) {
154 dataType = radiobutton.value;
156 setTimestampType = function(radiobutton) {
157 timestamps = radiobutton.value;
168 // Parse the URL for parameters. Use it to override the values hash.
169 var href = window.location.href;
170 var qmindex = href.indexOf('?');
172 var entries = href.substr(qmindex +
1).split('&');
173 for (var idx =
0; idx < entries.length; idx++) {
174 var entry = entries[idx];
175 var eindex = entry.indexOf('=');
177 values[entry.substr(
0, eindex)] = entry.substr(eindex +
1);
182 var populate = function(name) {
183 document.getElementById(name).value = values[name];
186 var populateRadio = function(name) {
187 var val = values[name];
188 var elem = document.getElementById(val);
195 populate('rollPeriod');
196 populate('repetitions');
197 populateRadio('type');