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