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