4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Benchmarking for Plots with Many Points
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
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>
15 <p>Plot which can be easily generated with different numbers of points for
16 benchmarking/profiling and improving performance of dygraphs.
</p>
18 <input type=
"text" id=
"num_points_input" size=
"20"
19 onchange=
"updatePlot();"></p>
21 <input type=
"text" id=
"num_series_input" size=
"20"
22 onchange=
"updatePlot();"></p>
23 <p>Roll period (in points):
24 <input type=
"text" id=
"roll_period_input" size=
"20"
25 onchange=
"updatePlot();"></p>
27 <input type=
"text" id=
"repetitions" size=
"20"
28 onchange=
"updatePlot();"></p>
32 <div id=
"message"></div>
33 <div id=
"metrics"></div>
35 <script type=
"text/javascript">
38 updatePlot = function() {
39 document.getElementById('message').innerHTML =
"";
40 var plotDiv = document.getElementById('plot');
41 plotDiv.innerHTML = 'Redrawing...';
43 parseInt(document.getElementById('num_points_input').value);
45 parseInt(document.getElementById('num_series_input').value);
47 parseInt(document.getElementById('repetitions').value);
51 var xmax =
2.0 * Math.PI;
53 var delta = (xmax - xmin) / (numPoints -
1);
55 for (var i =
0; i < numPoints; ++i) {
56 var x = xmin + delta * i;
58 for (var j =
0; j < numSeries; j++) {
59 var y = Math.sin(x + (j * adj));
65 for (var j =
0; j < numSeries; j++) {
66 labels.push(
"sin(x + " + (j*adj) +
")");
68 var rollPeriod = parseInt(
69 document.getElementById('roll_period_input').value);
70 var opts = {labels: labels, rollPeriod: rollPeriod};
72 for (var i =
0; i < repetitions; i++) {
73 var start = new Date();
74 plot = new Dygraph(plotDiv, data, opts);
76 durations.push(end - start);
78 if (repetitions ==
1) {
79 document.getElementById('message').innerHTML =
80 "completed in " + (end - start) +
" milliseconds.";
82 document.getElementById('message').innerHTML =
83 "Durations: " + durations;
85 updateMetrics(durations);
88 updateMetrics = function(data) {
90 for (var i =
0; i < data.length; i++) {
91 d = d + i +
"," + data[i] +
"\n";
93 var g = new Dygraph(document.getElementById('metrics'), d,
94 {highlightCircleSize:
4});
97 document.getElementById('num_points_input').value = '
100';
98 document.getElementById('num_series_input').value = '
1';
99 document.getElementById('roll_period_input').value = '
1';
100 document.getElementById('repetitions').value = '
1';