Replace default execution with a "go!" button. Also keeping history of
authorRobert Konigsberg <konigsberg@google.com>
Thu, 7 Apr 2011 16:33:02 +0000 (12:33 -0400)
committerRobert Konigsberg <konigsberg@google.com>
Thu, 7 Apr 2011 16:33:02 +0000 (12:33 -0400)
runs. And because meta is bettah, it even displays the rendering time of
the subgraph. Oh yes. You're welcome. You are welcome.

tests/dygraph-many-points-benchmark.html

index c2f83f1..e9731d5 100644 (file)
     <p>Plot which can be easily generated with different numbers of points for
        benchmarking/profiling and improving performance of dygraphs.</p>    
     <p>Number of points:
-       <input type="text" id="num_points_input" size="20"
-              onchange="updatePlot();"></p>
+       <input type="text" id="num_points_input" size="20"></p>
     <p>Number of series:
-       <input type="text" id="num_series_input" size="20"
-              onchange="updatePlot();"></p>
+       <input type="text" id="num_series_input" size="20"></p>
     <p>Roll period (in points):
-      <input type="text" id="roll_period_input" size="20"
-              onchange="updatePlot();"></p>
+      <input type="text" id="roll_period_input" size="20"></p>
     <p>Repetitions:
-      <input type="text" id="repetitions" size="20"
-              onchange="updatePlot();"></p>
+      <input type="text" id="repetitions" size="20"></p>
+
+    <input type="button" value="Go!" onclick="updatePlot();">
     <br>
     <br>
     <div id="plot"></div>
     <div id="message"></div>
     <div id="metrics"></div>
+    <div id="metaperformance"></div>
 
     <script type="text/javascript">
       var plot;
 
+      var durations = [];
       updatePlot = function() {
         document.getElementById('message').innerHTML = "";
         var plotDiv = document.getElementById('plot');
         var rollPeriod = parseInt(
             document.getElementById('roll_period_input').value);
         var opts = {labels: labels, rollPeriod: rollPeriod};
-        var durations = [];
+        var millisecondss = [];
         for (var i = 0; i < repetitions; i++) {
           var start = new Date();
           plot = new Dygraph(plotDiv, data, opts);
           var end = new Date();
-          durations.push(end - start);
+          durations.push([start, end - start]);
+          millisecondss.push(end - start);
         }
         if (repetitions == 1) {
           document.getElementById('message').innerHTML =
               "completed in " + (end - start) + " milliseconds.";
         } else {
           document.getElementById('message').innerHTML =
-              "Durations: " + durations;
+              "Durations: " + millisecondss;
         }
-        updateMetrics(durations);
-      };
 
-      updateMetrics = function(data) {
-        var d = "run,ms\n";
-        for (var i = 0; i < data.length; i++) {
-          d = d + i + "," + data[i] + "\n";
+        if (durations.length > 0) {
+          var start2 = new Date();
+          new Dygraph(
+              document.getElementById('metrics'),
+              durations,
+              {
+                highlightCircleSize: 4,
+                labels: [ "Date", "ms" ]
+                });
+          var end2 = new Date();
+          document.getElementById("metaperformance").innerHTML =
+              "completed in " + (end2 - start2) + " milliseconds.";
         }
-        var g = new Dygraph(document.getElementById('metrics'), d,
-            {highlightCircleSize: 4});
-      }
+      };
 
       document.getElementById('num_points_input').value = '100';
       document.getElementById('num_series_input').value = '1';