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]--> | |
9 | <script type="text/javascript" src="../strftime/strftime-min.js"></script> | |
10 | <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script> | |
11 | <script type="text/javascript" src="../dygraph-canvas.js"></script> | |
12 | <script type="text/javascript" src="../dygraph.js"></script> | |
13 | </head> | |
14 | <body> | |
15 | <p>Plot which can be easily generated with different numbers of points for | |
16 | benchmarking/profiling and improving performance of dygraphs.</p> | |
17 | <p>Number of points: | |
18 | <input type="text" id="num_points_input" size="20" | |
19 | onchange="updatePlot();"></p> | |
09c17553 RK |
20 | <p>Number of series: |
21 | <input type="text" id="num_series_input" size="20" | |
22 | onchange="updatePlot();"></p> | |
15b00ba8 JB |
23 | <p>Roll period (in points): |
24 | <input type="text" id="roll_period_input" size="20" | |
25 | onchange="updatePlot();"></p> | |
f7adb3d7 RK |
26 | <p>Repetitions: |
27 | <input type="text" id="repetitions" size="20" | |
28 | onchange="updatePlot();"></p> | |
15b00ba8 JB |
29 | <br> |
30 | <br> | |
31 | <div id="plot"></div> | |
09c17553 | 32 | <div id="message"></div> |
f7adb3d7 | 33 | <div id="metrics"></div> |
15b00ba8 JB |
34 | |
35 | <script type="text/javascript"> | |
36 | var plot; | |
37 | ||
38 | updatePlot = function() { | |
09c17553 | 39 | document.getElementById('message').innerHTML = ""; |
15b00ba8 JB |
40 | var plotDiv = document.getElementById('plot'); |
41 | plotDiv.innerHTML = 'Redrawing...'; | |
42 | var numPoints = | |
43 | parseInt(document.getElementById('num_points_input').value); | |
09c17553 RK |
44 | var numSeries = |
45 | parseInt(document.getElementById('num_series_input').value); | |
f7adb3d7 RK |
46 | var repetitions = |
47 | parseInt(document.getElementById('repetitions').value); | |
09c17553 | 48 | |
15b00ba8 JB |
49 | var data = []; |
50 | var xmin = 0.0; | |
51 | var xmax = 2.0 * Math.PI; | |
09c17553 | 52 | var adj = .5; |
15b00ba8 JB |
53 | var delta = (xmax - xmin) / (numPoints - 1); |
54 | ||
55 | for (var i = 0; i < numPoints; ++i) { | |
56 | var x = xmin + delta * i; | |
09c17553 RK |
57 | var elem = [ x ]; |
58 | for (var j = 0; j < numSeries; j++) { | |
59 | var y = Math.sin(x + (j * adj)); | |
60 | elem.push(y); | |
61 | } | |
62 | data[i] = elem; | |
63 | } | |
64 | var labels = [ "x" ]; | |
65 | for (var j = 0; j < numSeries; j++) { | |
66 | labels.push("sin(x + " + (j*adj) + ")"); | |
15b00ba8 | 67 | } |
15b00ba8 JB |
68 | var rollPeriod = parseInt( |
69 | document.getElementById('roll_period_input').value); | |
09c17553 | 70 | var opts = {labels: labels, rollPeriod: rollPeriod}; |
f7adb3d7 RK |
71 | var durations = []; |
72 | for (var i = 0; i < repetitions; i++) { | |
73 | var start = new Date(); | |
74 | plot = new Dygraph(plotDiv, data, opts); | |
75 | var end = new Date(); | |
76 | durations.push(end - start); | |
77 | } | |
78 | if (repetitions == 1) { | |
79 | document.getElementById('message').innerHTML = | |
80 | "completed in " + (end - start) + " milliseconds."; | |
81 | } else { | |
82 | document.getElementById('message').innerHTML = | |
83 | "Durations: " + durations; | |
84 | } | |
85 | updateMetrics(durations); | |
15b00ba8 JB |
86 | }; |
87 | ||
f7adb3d7 RK |
88 | updateMetrics = function(data) { |
89 | var d = "run,ms\n"; | |
90 | for (var i = 0; i < data.length; i++) { | |
91 | d = d + i + "," + data[i] + "\n"; | |
92 | } | |
93 | var g = new Dygraph(document.getElementById('metrics'), d, | |
94 | {highlightCircleSize: 4}); | |
95 | } | |
96 | ||
15b00ba8 | 97 | document.getElementById('num_points_input').value = '100'; |
09c17553 | 98 | document.getElementById('num_series_input').value = '1'; |
15b00ba8 | 99 | document.getElementById('roll_period_input').value = '1'; |
f7adb3d7 | 100 | document.getElementById('repetitions').value = '1'; |
15b00ba8 JB |
101 | updatePlot(); |
102 | </script> | |
103 | </body> | |
104 | </html> |