Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
15b00ba8 JB |
2 | <html> |
3 | <head> | |
10494b48 | 4 | <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> |
15b00ba8 JB |
5 | <title>Benchmarking for Plots with Many Points</title> |
6 | <!--[if IE]> | |
7 | <script type="text/javascript" src="../excanvas.js"></script> | |
8 | <![endif]--> | |
7e5ddc94 DV |
9 | <!-- |
10 | For production (minified) code, use: | |
11 | <script type="text/javascript" src="dygraph-combined.js"></script> | |
12 | --> | |
13 | <script type="text/javascript" src="../dygraph-dev.js"></script> | |
14 | ||
15b00ba8 JB |
15 | </head> |
16 | <body> | |
17 | <p>Plot which can be easily generated with different numbers of points for | |
18 | benchmarking/profiling and improving performance of dygraphs.</p> | |
5ecfa608 RK |
19 | <div id='parameters'> |
20 | <p>Data to plot: | |
21 | <input type="radio" id="sine" name="group1" value="sine" | |
0a14b0f9 | 22 | onclick="setDataType(this);" checked> sinusoid function |
5ecfa608 | 23 | <input type="radio" id="rand" name="group1" value="rand" |
0a14b0f9 AV |
24 | onclick="setDataType(this);"> random points <br></p> |
25 | <p>Timestamps: | |
4c9d65da DV |
26 | <input type="radio" id="aligned" name="timestamps" value="aligned" checked> aligned |
27 | <input type="radio" id="unaligned" name="timestamps" value="unaligned"> unaligned | |
28 | </p> | |
29 | <p>x-axis type: | |
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 | |
9ab15431 | 32 | <p><input type="checkbox" id="fill"><label for="fill"> Fill?</label></p> |
0a14b0f9 | 33 | <p>Number of points per series (points): |
5ecfa608 | 34 | <input type="text" id="points" size="20"></p> |
6f417f78 | 35 | <p>Number of series (series): |
5ecfa608 | 36 | <input type="text" id="series" size="20"></p> |
6f417f78 | 37 | <p>Roll period (in points, rollPeriod): |
5ecfa608 | 38 | <input type="text" id="rollPeriod" size="20"></p> |
6f417f78 | 39 | <p>Repetitions (repititions): |
5ecfa608 RK |
40 | <input type="text" id="repetitions" size="20"></p> |
41 | <input type="button" value="Go!" onclick="updatePlot();"> | |
42 | </div> | |
15b00ba8 JB |
43 | <br> |
44 | <br> | |
45 | <div id="plot"></div> | |
09c17553 | 46 | <div id="message"></div> |
f7adb3d7 | 47 | <div id="metrics"></div> |
62c2a51e | 48 | <div id="metaperformance"></div> |
15b00ba8 JB |
49 | |
50 | <script type="text/javascript"> | |
5ecfa608 RK |
51 | var graph = null; |
52 | var metrics = null; | |
a058247d | 53 | var dataType = "sine"; |
0a14b0f9 | 54 | var timestamps = "aligned"; |
4c9d65da | 55 | var numRuns = 0; |
15b00ba8 | 56 | |
62c2a51e | 57 | var durations = []; |
15b00ba8 | 58 | updatePlot = function() { |
09c17553 | 59 | document.getElementById('message').innerHTML = ""; |
15b00ba8 JB |
60 | var plotDiv = document.getElementById('plot'); |
61 | plotDiv.innerHTML = 'Redrawing...'; | |
4c9d65da | 62 | var numeric = document.getElementById('numeric').checked; |
15b00ba8 | 63 | var numPoints = |
bbba718a | 64 | parseInt(document.getElementById('points').value); |
09c17553 | 65 | var numSeries = |
bbba718a | 66 | parseInt(document.getElementById('series').value); |
f7adb3d7 RK |
67 | var repetitions = |
68 | parseInt(document.getElementById('repetitions').value); | |
09c17553 | 69 | |
15b00ba8 | 70 | var data = []; |
4c9d65da DV |
71 | var xmin = numeric ? 0.0 : Date.parse("2014/01/01"); |
72 | var xmax = numeric ? 2.0 * Math.PI : Date.parse("2014/12/31"); | |
09c17553 | 73 | var adj = .5; |
15b00ba8 | 74 | var delta = (xmax - xmin) / (numPoints - 1); |
0a14b0f9 | 75 | var unalignmentDelta = delta / numSeries; |
15b00ba8 JB |
76 | |
77 | for (var i = 0; i < numPoints; ++i) { | |
78 | var x = xmin + delta * i; | |
09c17553 RK |
79 | var elem = [ x ]; |
80 | for (var j = 0; j < numSeries; j++) { | |
a058247d AR |
81 | var y; |
82 | if (dataType == "rand") { | |
36d73927 | 83 | y = Math.pow(Math.random() - Math.random(), 7); |
a058247d AR |
84 | } else { |
85 | y = Math.sin(x + (j * adj)); | |
86 | } | |
09c17553 RK |
87 | elem.push(y); |
88 | } | |
0a14b0f9 AV |
89 | if (timestamps == "aligned") { |
90 | data[i] = elem; | |
91 | } else { | |
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; | |
96 | } | |
97 | } | |
4c9d65da | 98 | if (!numeric) data[i][0] = new Date(data[i][0]); |
09c17553 RK |
99 | } |
100 | var labels = [ "x" ]; | |
101 | for (var j = 0; j < numSeries; j++) { | |
36d73927 | 102 | labels.push("data-set-" + j); |
15b00ba8 | 103 | } |
15b00ba8 | 104 | var rollPeriod = parseInt( |
bbba718a | 105 | document.getElementById('rollPeriod').value); |
7153e001 | 106 | var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"}; |
9ab15431 | 107 | opts['fillGraph'] = document.getElementById('fill').checked; |
62c2a51e | 108 | var millisecondss = []; |
f7adb3d7 | 109 | for (var i = 0; i < repetitions; i++) { |
5ecfa608 RK |
110 | if (graph != null) { |
111 | graph.destroy(); // release memory from prior graph. | |
112 | } | |
f7adb3d7 | 113 | var start = new Date(); |
5ecfa608 | 114 | graph = new Dygraph(plotDiv, data, opts); |
f7adb3d7 | 115 | var end = new Date(); |
4c9d65da | 116 | durations.push([numRuns++, end - start]); |
62c2a51e | 117 | millisecondss.push(end - start); |
f7adb3d7 RK |
118 | } |
119 | if (repetitions == 1) { | |
120 | document.getElementById('message').innerHTML = | |
121 | "completed in " + (end - start) + " milliseconds."; | |
122 | } else { | |
a11725ce AR |
123 | var avg = 0; |
124 | for (var i = 0; i < millisecondss.length; i++) { | |
125 | avg+=millisecondss[i]; | |
126 | } | |
127 | avg/=millisecondss.length; | |
f7adb3d7 | 128 | document.getElementById('message').innerHTML = |
4c9d65da | 129 | "Durations: " + millisecondss + "<br>Average: " + avg; |
f7adb3d7 | 130 | } |
15b00ba8 | 131 | |
62c2a51e RK |
132 | if (durations.length > 0) { |
133 | var start2 = new Date(); | |
5ecfa608 RK |
134 | if (!metrics) { |
135 | metrics = new Dygraph( | |
136 | document.getElementById('metrics'), | |
137 | durations, | |
138 | { | |
139 | highlightCircleSize: 4, | |
140 | labels: [ "Date", "ms" ] | |
141 | }); | |
142 | } else { | |
143 | metrics.updateOptions({file: durations}); | |
144 | } | |
62c2a51e RK |
145 | var end2 = new Date(); |
146 | document.getElementById("metaperformance").innerHTML = | |
147 | "completed in " + (end2 - start2) + " milliseconds."; | |
f7adb3d7 | 148 | } |
c3fa4a74 DV |
149 | |
150 | return millisecondss; | |
62c2a51e | 151 | }; |
a058247d | 152 | |
0a14b0f9 | 153 | setDataType = function(radiobutton) { |
a058247d AR |
154 | dataType = radiobutton.value; |
155 | }; | |
0a14b0f9 AV |
156 | setTimestampType = function(radiobutton) { |
157 | timestamps = radiobutton.value; | |
158 | }; | |
f7adb3d7 | 159 | |
bbba718a RK |
160 | var values = { |
161 | points: 100, | |
162 | series: 1, | |
163 | rollPeriod: 1, | |
164 | repetitions: 1, | |
375adb8f | 165 | type: 'sine' |
bbba718a RK |
166 | }; |
167 | ||
168 | // Parse the URL for parameters. Use it to override the values hash. | |
169 | var href = window.location.href; | |
170 | var qmindex = href.indexOf('?'); | |
171 | if (qmindex > 0) { | |
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('='); | |
176 | if (eindex > 0) { | |
177 | values[entry.substr(0, eindex)] = entry.substr(eindex + 1); | |
178 | } | |
179 | } | |
180 | } | |
181 | ||
182 | var populate = function(name) { | |
183 | document.getElementById(name).value = values[name]; | |
184 | } | |
185 | ||
186 | var populateRadio = function(name) { | |
187 | var val = values[name]; | |
188 | var elem = document.getElementById(val); | |
189 | elem.checked = true; | |
190 | elem.onclick(); | |
191 | } | |
192 | ||
193 | populate('points'); | |
194 | populate('series'); | |
195 | populate('rollPeriod'); | |
196 | populate('repetitions'); | |
197 | populateRadio('type'); | |
198 | if (values["go"]) { | |
199 | updatePlot(); | |
200 | } | |
15b00ba8 JB |
201 | </script> |
202 | </body> | |
203 | </html> |