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