<body>
<p>Plot which can be easily generated with different numbers of points for
benchmarking/profiling and improving performance of dygraphs.</p>
- <p>Data to plot:
- <input type="radio" id="sine" name="group1" value="sine"
- onclick="clickedRadioButton(this);" checked> sinusoid function
- <input type="radio" id="rand" name="group1" value="rand"
- onclick="clickedRadioButton(this);"> random points <br></p>
- <p>Number of points:
- <input type="text" id="points" size="20"></p>
- <p>Number of series:
- <input type="text" id="series" size="20"></p>
- <p>Roll period (in points):
- <input type="text" id="rollPeriod" size="20"></p>
- <p>Repetitions:
- <input type="text" id="repetitions" size="20"></p>
-
- <input type="button" value="Go!" onclick="updatePlot();">
+ <div id='parameters'>
+ <p>Data to plot:
+ <input type="radio" id="sine" name="group1" value="sine"
+ onclick="clickedRadioButton(this);" checked> sinusoid function
+ <input type="radio" id="rand" name="group1" value="rand"
+ onclick="clickedRadioButton(this);"> random points <br></p>
+ <p>Number of points:
+ <input type="text" id="points" size="20"></p>
+ <p>Number of series:
+ <input type="text" id="series" size="20"></p>
+ <p>Roll period (in points):
+ <input type="text" id="rollPeriod" size="20"></p>
+ <p>Repetitions:
+ <input type="text" id="repetitions" size="20"></p>
+ <input type="button" value="Go!" onclick="updatePlot();">
+ </div>
<br>
<br>
<div id="plot"></div>
<div id="metaperformance"></div>
<script type="text/javascript">
- var plot;
+ var graph = null;
+ var metrics = null;
var dataType = "sine";
var durations = [];
var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
var millisecondss = [];
for (var i = 0; i < repetitions; i++) {
+ if (graph != null) {
+ graph.destroy(); // release memory from prior graph.
+ }
var start = new Date();
- plot = new Dygraph(plotDiv, data, opts);
+ graph = new Dygraph(plotDiv, data, opts);
var end = new Date();
durations.push([start, end - start]);
millisecondss.push(end - start);
if (durations.length > 0) {
var start2 = new Date();
- new Dygraph(
- document.getElementById('metrics'),
- durations,
- {
- highlightCircleSize: 4,
- labels: [ "Date", "ms" ]
- });
+ if (!metrics) {
+ metrics = new Dygraph(
+ document.getElementById('metrics'),
+ durations,
+ {
+ highlightCircleSize: 4,
+ labels: [ "Date", "ms" ]
+ });
+ } else {
+ metrics.updateOptions({file: durations});
+ }
var end2 = new Date();
document.getElementById("metaperformance").innerHTML =
"completed in " + (end2 - start2) + " milliseconds.";