Merge pull request #131 from klausw-g/highlight-NaN-2
[dygraphs.git] / tests / dygraph-many-points-benchmark.html
CommitLineData
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"
22 onclick="clickedRadioButton(this);" checked> sinusoid function
23 <input type="radio" id="rand" name="group1" value="rand"
24 onclick="clickedRadioButton(this);"> random points <br></p>
25 <p>Number of points:
26 <input type="text" id="points" size="20"></p>
27 <p>Number of series:
28 <input type="text" id="series" size="20"></p>
29 <p>Roll period (in points):
30 <input type="text" id="rollPeriod" size="20"></p>
31 <p>Repetitions:
32 <input type="text" id="repetitions" size="20"></p>
33 <input type="button" value="Go!" onclick="updatePlot();">
34 </div>
15b00ba8
JB
35 <br>
36 <br>
37 <div id="plot"></div>
09c17553 38 <div id="message"></div>
f7adb3d7 39 <div id="metrics"></div>
62c2a51e 40 <div id="metaperformance"></div>
15b00ba8
JB
41
42 <script type="text/javascript">
5ecfa608
RK
43 var graph = null;
44 var metrics = null;
a058247d 45 var dataType = "sine";
15b00ba8 46
62c2a51e 47 var durations = [];
15b00ba8 48 updatePlot = function() {
09c17553 49 document.getElementById('message').innerHTML = "";
15b00ba8
JB
50 var plotDiv = document.getElementById('plot');
51 plotDiv.innerHTML = 'Redrawing...';
52 var numPoints =
bbba718a 53 parseInt(document.getElementById('points').value);
09c17553 54 var numSeries =
bbba718a 55 parseInt(document.getElementById('series').value);
f7adb3d7
RK
56 var repetitions =
57 parseInt(document.getElementById('repetitions').value);
09c17553 58
15b00ba8
JB
59 var data = [];
60 var xmin = 0.0;
61 var xmax = 2.0 * Math.PI;
09c17553 62 var adj = .5;
15b00ba8
JB
63 var delta = (xmax - xmin) / (numPoints - 1);
64
65 for (var i = 0; i < numPoints; ++i) {
66 var x = xmin + delta * i;
09c17553
RK
67 var elem = [ x ];
68 for (var j = 0; j < numSeries; j++) {
a058247d
AR
69 var y;
70 if (dataType == "rand") {
36d73927 71 y = Math.pow(Math.random() - Math.random(), 7);
a058247d
AR
72 } else {
73 y = Math.sin(x + (j * adj));
74 }
09c17553
RK
75 elem.push(y);
76 }
77 data[i] = elem;
78 }
79 var labels = [ "x" ];
80 for (var j = 0; j < numSeries; j++) {
36d73927 81 labels.push("data-set-" + j);
15b00ba8 82 }
15b00ba8 83 var rollPeriod = parseInt(
bbba718a 84 document.getElementById('rollPeriod').value);
7153e001 85 var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
62c2a51e 86 var millisecondss = [];
f7adb3d7 87 for (var i = 0; i < repetitions; i++) {
5ecfa608
RK
88 if (graph != null) {
89 graph.destroy(); // release memory from prior graph.
90 }
f7adb3d7 91 var start = new Date();
5ecfa608 92 graph = new Dygraph(plotDiv, data, opts);
f7adb3d7 93 var end = new Date();
62c2a51e
RK
94 durations.push([start, end - start]);
95 millisecondss.push(end - start);
f7adb3d7
RK
96 }
97 if (repetitions == 1) {
98 document.getElementById('message').innerHTML =
99 "completed in " + (end - start) + " milliseconds.";
100 } else {
a11725ce
AR
101 var avg = 0;
102 for (var i = 0; i < millisecondss.length; i++) {
103 avg+=millisecondss[i];
104 }
105 avg/=millisecondss.length;
f7adb3d7 106 document.getElementById('message').innerHTML =
a11725ce 107 "Durations: " + millisecondss + " Average: " + avg;
f7adb3d7 108 }
15b00ba8 109
62c2a51e
RK
110 if (durations.length > 0) {
111 var start2 = new Date();
5ecfa608
RK
112 if (!metrics) {
113 metrics = new Dygraph(
114 document.getElementById('metrics'),
115 durations,
116 {
117 highlightCircleSize: 4,
118 labels: [ "Date", "ms" ]
119 });
120 } else {
121 metrics.updateOptions({file: durations});
122 }
62c2a51e
RK
123 var end2 = new Date();
124 document.getElementById("metaperformance").innerHTML =
125 "completed in " + (end2 - start2) + " milliseconds.";
f7adb3d7 126 }
62c2a51e 127 };
a058247d
AR
128
129 clickedRadioButton = function(radiobutton) {
130 dataType = radiobutton.value;
131 };
f7adb3d7 132
bbba718a
RK
133 var values = {
134 points: 100,
135 series: 1,
136 rollPeriod: 1,
137 repetitions: 1,
b5daaaf0 138 type: 'sine',
bbba718a
RK
139 };
140
141 // Parse the URL for parameters. Use it to override the values hash.
142 var href = window.location.href;
143 var qmindex = href.indexOf('?');
144 if (qmindex > 0) {
145 var entries = href.substr(qmindex + 1).split('&');
146 for (var idx = 0; idx < entries.length; idx++) {
147 var entry = entries[idx];
148 var eindex = entry.indexOf('=');
149 if (eindex > 0) {
150 values[entry.substr(0, eindex)] = entry.substr(eindex + 1);
151 }
152 }
153 }
154
155 var populate = function(name) {
156 document.getElementById(name).value = values[name];
157 }
158
159 var populateRadio = function(name) {
160 var val = values[name];
161 var elem = document.getElementById(val);
162 elem.checked = true;
163 elem.onclick();
164 }
165
166 populate('points');
167 populate('series');
168 populate('rollPeriod');
169 populate('repetitions');
170 populateRadio('type');
171 if (values["go"]) {
172 updatePlot();
173 }
15b00ba8
JB
174 </script>
175 </body>
176</html>