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> | |
a058247d AR |
19 | <p>Data to plot: |
20 | <input type="radio" name="plot_group1" value="sine" onclick="clickedRadioButton(this);" checked> sinusoid function | |
21 | <input type="radio" name="plot_group1" value="rand" onclick="clickedRadioButton(this);"> random points <br></p> | |
15b00ba8 | 22 | <p>Number of points: |
62c2a51e | 23 | <input type="text" id="num_points_input" size="20"></p> |
09c17553 | 24 | <p>Number of series: |
62c2a51e | 25 | <input type="text" id="num_series_input" size="20"></p> |
15b00ba8 | 26 | <p>Roll period (in points): |
62c2a51e | 27 | <input type="text" id="roll_period_input" size="20"></p> |
f7adb3d7 | 28 | <p>Repetitions: |
62c2a51e RK |
29 | <input type="text" id="repetitions" size="20"></p> |
30 | ||
31 | <input type="button" value="Go!" onclick="updatePlot();"> | |
15b00ba8 JB |
32 | <br> |
33 | <br> | |
34 | <div id="plot"></div> | |
09c17553 | 35 | <div id="message"></div> |
f7adb3d7 | 36 | <div id="metrics"></div> |
62c2a51e | 37 | <div id="metaperformance"></div> |
15b00ba8 JB |
38 | |
39 | <script type="text/javascript"> | |
40 | var plot; | |
a058247d | 41 | var dataType = "sine"; |
15b00ba8 | 42 | |
62c2a51e | 43 | var durations = []; |
15b00ba8 | 44 | updatePlot = function() { |
09c17553 | 45 | document.getElementById('message').innerHTML = ""; |
15b00ba8 JB |
46 | var plotDiv = document.getElementById('plot'); |
47 | plotDiv.innerHTML = 'Redrawing...'; | |
48 | var numPoints = | |
49 | parseInt(document.getElementById('num_points_input').value); | |
09c17553 RK |
50 | var numSeries = |
51 | parseInt(document.getElementById('num_series_input').value); | |
f7adb3d7 RK |
52 | var repetitions = |
53 | parseInt(document.getElementById('repetitions').value); | |
09c17553 | 54 | |
15b00ba8 JB |
55 | var data = []; |
56 | var xmin = 0.0; | |
57 | var xmax = 2.0 * Math.PI; | |
09c17553 | 58 | var adj = .5; |
15b00ba8 JB |
59 | var delta = (xmax - xmin) / (numPoints - 1); |
60 | ||
61 | for (var i = 0; i < numPoints; ++i) { | |
62 | var x = xmin + delta * i; | |
09c17553 RK |
63 | var elem = [ x ]; |
64 | for (var j = 0; j < numSeries; j++) { | |
a058247d AR |
65 | var y; |
66 | if (dataType == "rand") { | |
36d73927 | 67 | y = Math.pow(Math.random() - Math.random(), 7); |
a058247d AR |
68 | } else { |
69 | y = Math.sin(x + (j * adj)); | |
70 | } | |
09c17553 RK |
71 | elem.push(y); |
72 | } | |
73 | data[i] = elem; | |
74 | } | |
75 | var labels = [ "x" ]; | |
76 | for (var j = 0; j < numSeries; j++) { | |
36d73927 | 77 | labels.push("data-set-" + j); |
15b00ba8 | 78 | } |
15b00ba8 JB |
79 | var rollPeriod = parseInt( |
80 | document.getElementById('roll_period_input').value); | |
7153e001 | 81 | var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"}; |
62c2a51e | 82 | var millisecondss = []; |
f7adb3d7 RK |
83 | for (var i = 0; i < repetitions; i++) { |
84 | var start = new Date(); | |
85 | plot = new Dygraph(plotDiv, data, opts); | |
86 | var end = new Date(); | |
62c2a51e RK |
87 | durations.push([start, end - start]); |
88 | millisecondss.push(end - start); | |
f7adb3d7 RK |
89 | } |
90 | if (repetitions == 1) { | |
91 | document.getElementById('message').innerHTML = | |
92 | "completed in " + (end - start) + " milliseconds."; | |
93 | } else { | |
a11725ce AR |
94 | var avg = 0; |
95 | for (var i = 0; i < millisecondss.length; i++) { | |
96 | avg+=millisecondss[i]; | |
97 | } | |
98 | avg/=millisecondss.length; | |
f7adb3d7 | 99 | document.getElementById('message').innerHTML = |
a11725ce | 100 | "Durations: " + millisecondss + " Average: " + avg; |
f7adb3d7 | 101 | } |
15b00ba8 | 102 | |
62c2a51e RK |
103 | if (durations.length > 0) { |
104 | var start2 = new Date(); | |
105 | new Dygraph( | |
106 | document.getElementById('metrics'), | |
107 | durations, | |
108 | { | |
109 | highlightCircleSize: 4, | |
110 | labels: [ "Date", "ms" ] | |
111 | }); | |
112 | var end2 = new Date(); | |
113 | document.getElementById("metaperformance").innerHTML = | |
114 | "completed in " + (end2 - start2) + " milliseconds."; | |
f7adb3d7 | 115 | } |
62c2a51e | 116 | }; |
a058247d AR |
117 | |
118 | clickedRadioButton = function(radiobutton) { | |
119 | dataType = radiobutton.value; | |
120 | }; | |
121 | ||
f7adb3d7 | 122 | |
15b00ba8 | 123 | document.getElementById('num_points_input').value = '100'; |
09c17553 | 124 | document.getElementById('num_series_input').value = '1'; |
15b00ba8 | 125 | document.getElementById('roll_period_input').value = '1'; |
f7adb3d7 | 126 | document.getElementById('repetitions').value = '1'; |
15b00ba8 JB |
127 | </script> |
128 | </body> | |
129 | </html> |