Enhancement to dygraph-many-point*-benchmark.html
authorRobert Konigsberg <konigsberg@google.com>
Mon, 17 Oct 2011 16:34:40 +0000 (12:34 -0400)
committerDan Vanderkam <danvk@google.com>
Mon, 17 Oct 2011 16:34:40 +0000 (12:34 -0400)
dygraph-canvas.js
tests/dygraph-many-points-benchmark.html

index d4b088e..9a12459 100644 (file)
@@ -155,6 +155,7 @@ DygraphCanvasRenderer.prototype.render = function() {
 
   if (this.attr_('drawYGrid')) {
     var ticks = this.layout.yticks;
+    // TODO(konigsberg): I don't think these calls to save() have a corresponding restore().
     ctx.save();
     ctx.strokeStyle = this.attr_('gridLineColor');
     ctx.lineWidth = this.attr_('gridLineWidth');
index d1e2a58..37c7c2b 100644 (file)
     <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" name="plot_group1" value="sine" onclick="clickedRadioButton(this);" checked> sinusoid function
-      <input type="radio" name="plot_group1" value="rand" onclick="clickedRadioButton(this);"> random points <br></p>
+      <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="num_points_input" size="20"></p>
+       <input type="text" id="points" size="20"></p>
     <p>Number of series:
-       <input type="text" id="num_series_input" size="20"></p>
+       <input type="text" id="series" size="20"></p>
     <p>Roll period (in points):
-      <input type="text" id="roll_period_input" size="20"></p>
+      <input type="text" id="rollPeriod" size="20"></p>
     <p>Repetitions:
       <input type="text" id="repetitions" size="20"></p>
 
@@ -46,9 +48,9 @@
         var plotDiv = document.getElementById('plot');
         plotDiv.innerHTML = 'Redrawing...';
         var numPoints =
-            parseInt(document.getElementById('num_points_input').value);
+            parseInt(document.getElementById('points').value);
         var numSeries =
-            parseInt(document.getElementById('num_series_input').value);
+            parseInt(document.getElementById('series').value);
         var repetitions =
             parseInt(document.getElementById('repetitions').value);
 
@@ -77,7 +79,7 @@
           labels.push("data-set-" + j);
         }
         var rollPeriod = parseInt(
-            document.getElementById('roll_period_input').value);
+            document.getElementById('rollPeriod').value);
         var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
         var millisecondss = [];
         for (var i = 0; i < repetitions; i++) {
       clickedRadioButton = function(radiobutton) {
         dataType = radiobutton.value;
       };
-        
 
-      document.getElementById('num_points_input').value = '100';
-      document.getElementById('num_series_input').value = '1';
-      document.getElementById('roll_period_input').value = '1';
-      document.getElementById('repetitions').value = '1';
+      var values = {
+        points: 100,
+        series: 1,
+        rollPeriod: 1,
+        repetitions: 1,
+        type: 'sine'
+      };
+
+      // Parse the URL for parameters. Use it to override the values hash.
+      var href = window.location.href;
+      var qmindex = href.indexOf('?');
+      if (qmindex > 0) {
+        var entries = href.substr(qmindex + 1).split('&');
+        for (var idx = 0; idx < entries.length; idx++) {
+          var entry = entries[idx];
+          var eindex = entry.indexOf('=');
+          if (eindex > 0) {
+            values[entry.substr(0, eindex)] = entry.substr(eindex + 1);
+          }
+        }
+      }
+
+      var populate = function(name) {
+        document.getElementById(name).value = values[name];
+      }
+
+      var populateRadio = function(name) {
+        var val = values[name];
+        var elem = document.getElementById(val);
+        elem.checked = true;
+        elem.onclick();
+      }
+
+      populate('points');
+      populate('series');
+      populate('rollPeriod');
+      populate('repetitions');
+      populateRadio('type');
+      if (values["go"]) {
+        updatePlot();
+      }
+      
     </script>
   </body>
 </html>