Commit | Line | Data |
---|---|---|
15b00ba8 JB |
1 | <html> |
2 | <head> | |
3 | <title>Benchmarking for Plots with Many Points</title> | |
4 | <!--[if IE]> | |
5 | <script type="text/javascript" src="../excanvas.js"></script> | |
6 | <![endif]--> | |
7 | <script type="text/javascript" src="../strftime/strftime-min.js"></script> | |
8 | <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script> | |
9 | <script type="text/javascript" src="../dygraph-canvas.js"></script> | |
10 | <script type="text/javascript" src="../dygraph.js"></script> | |
11 | </head> | |
12 | <body> | |
13 | <p>Plot which can be easily generated with different numbers of points for | |
14 | benchmarking/profiling and improving performance of dygraphs.</p> | |
15 | <p>Number of points: | |
16 | <input type="text" id="num_points_input" size="20" | |
17 | onchange="updatePlot();"></p> | |
09c17553 RK |
18 | <p>Number of series: |
19 | <input type="text" id="num_series_input" size="20" | |
20 | onchange="updatePlot();"></p> | |
15b00ba8 JB |
21 | <p>Roll period (in points): |
22 | <input type="text" id="roll_period_input" size="20" | |
23 | onchange="updatePlot();"></p> | |
24 | <br> | |
25 | <br> | |
26 | <div id="plot"></div> | |
09c17553 | 27 | <div id="message"></div> |
15b00ba8 JB |
28 | |
29 | <script type="text/javascript"> | |
30 | var plot; | |
31 | ||
32 | updatePlot = function() { | |
09c17553 | 33 | document.getElementById('message').innerHTML = ""; |
15b00ba8 JB |
34 | var plotDiv = document.getElementById('plot'); |
35 | plotDiv.innerHTML = 'Redrawing...'; | |
36 | var numPoints = | |
37 | parseInt(document.getElementById('num_points_input').value); | |
09c17553 RK |
38 | var numSeries = |
39 | parseInt(document.getElementById('num_series_input').value); | |
40 | ||
15b00ba8 JB |
41 | var data = []; |
42 | var xmin = 0.0; | |
43 | var xmax = 2.0 * Math.PI; | |
09c17553 | 44 | var adj = .5; |
15b00ba8 JB |
45 | var delta = (xmax - xmin) / (numPoints - 1); |
46 | ||
47 | for (var i = 0; i < numPoints; ++i) { | |
48 | var x = xmin + delta * i; | |
09c17553 RK |
49 | var elem = [ x ]; |
50 | for (var j = 0; j < numSeries; j++) { | |
51 | var y = Math.sin(x + (j * adj)); | |
52 | elem.push(y); | |
53 | } | |
54 | data[i] = elem; | |
55 | } | |
56 | var labels = [ "x" ]; | |
57 | for (var j = 0; j < numSeries; j++) { | |
58 | labels.push("sin(x + " + (j*adj) + ")"); | |
15b00ba8 | 59 | } |
15b00ba8 JB |
60 | var rollPeriod = parseInt( |
61 | document.getElementById('roll_period_input').value); | |
09c17553 RK |
62 | var opts = {labels: labels, rollPeriod: rollPeriod}; |
63 | var start = new Date(); | |
15b00ba8 | 64 | plot = new Dygraph(plotDiv, data, opts); |
09c17553 RK |
65 | var end = new Date(); |
66 | document.getElementById('message').innerHTML = | |
67 | "completed in " + (end - start) + " milliseconds."; | |
15b00ba8 JB |
68 | }; |
69 | ||
70 | document.getElementById('num_points_input').value = '100'; | |
09c17553 | 71 | document.getElementById('num_series_input').value = '1'; |
15b00ba8 JB |
72 | document.getElementById('roll_period_input').value = '1'; |
73 | updatePlot(); | |
74 | </script> | |
75 | </body> | |
76 | </html> |