Bug fix for dygraph point selection touch event.

[dygraphs.git] / tests / dygraph-many-points-benchmark.html
diff --git a/tests/dygraph-many-points-benchmark.html b/tests/dygraph-many-points-benchmark.html

index 7aadb19..e276e06 100644 (file)
--- a/tests/dygraph-many-points-benchmark.html
+++ b/tests/dygraph-many-points-benchmark.html
@@ -1,16 +1,9 @@
  <!DOCTYPE html>
  <html>
    <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <link rel="stylesheet" href="../dist/dygraph.css">
      <title>Benchmarking for Plots with Many Points</title>
-    <!--[if IE]>
-    <script type="text/javascript" src="../excanvas.js"></script>
-    <![endif]-->
-    <!--
-    For production (minified) code, use:
-    <script type="text/javascript" src="dygraph-combined.js"></script>
-    -->
-    <script type="text/javascript" src="../dygraph-dev.js"></script>
+    <script type="text/javascript" src="../dist/dygraph.js"></script>
  
    </head>
    <body>
@@ -19,16 +12,24 @@
      <div id='parameters'>
        <p>Data to plot:
          <input type="radio" id="sine" name="group1" value="sine"
-          onclick="clickedRadioButton(this);" checked> sinusoid function
+          onclick="setDataType(this);" checked> sinusoid function
          <input type="radio" id="rand" name="group1" value="rand"
-          onclick="clickedRadioButton(this);"> random points <br></p>
-      <p>Number of points:
+          onclick="setDataType(this);"> random points <br></p>
+      <p>Timestamps:
+        <input type="radio" id="aligned" name="timestamps" value="aligned" checked> aligned
+        <input type="radio" id="unaligned" name="timestamps" value="unaligned"> unaligned
+      </p>
+      <p>x-axis type:
+        <input type="radio" id="numeric" name="x-axis-type" value="numeric" onclick="setXAxisType(this)" checked> numeric
+        <input type="radio" id="dates" name="x-axis-type" value="date" onclick="setXAxisType(this)"> date/time
+      <p><input type="checkbox" id="fill"><label for="fill"> Fill?</label></p>
+      <p>Number of points per series (points):
           <input type="text" id="points" size="20"></p>
-      <p>Number of series:
+      <p>Number of series (series):
           <input type="text" id="series" size="20"></p>
-      <p>Roll period (in points):
+      <p>Roll period (in points, rollPeriod):
          <input type="text" id="rollPeriod" size="20"></p>
-      <p>Repetitions:
+      <p>Repetitions (repititions):
          <input type="text" id="repetitions" size="20"></p>
        <input type="button" value="Go!" onclick="updatePlot();">
      </div>
@@ -43,12 +44,15 @@
        var graph = null;
        var metrics = null;
        var dataType = "sine";
+      var timestamps = "aligned";
+      var numRuns = 0;
  
        var durations = [];
        updatePlot = function() {
          document.getElementById('message').innerHTML = "";
          var plotDiv = document.getElementById('plot');
          plotDiv.innerHTML = 'Redrawing...';
+        var numeric = document.getElementById('numeric').checked;
          var numPoints =
              parseInt(document.getElementById('points').value);
          var numSeries =
@@ -57,10 +61,11 @@
              parseInt(document.getElementById('repetitions').value);
  
          var data = [];
-        var xmin = 0.0;
-        var xmax = 2.0 * Math.PI;
+        var xmin = numeric ? 0.0 : Date.parse("2014/01/01");
+        var xmax = numeric ? 2.0 * Math.PI : Date.parse("2014/12/31");
          var adj = .5;
          var delta = (xmax - xmin) / (numPoints - 1);
+        var unalignmentDelta = delta / numSeries;
  
          for (var i = 0; i < numPoints; ++i) {
            var x = xmin + delta * i;
@@ -74,7 +79,16 @@
              }
              elem.push(y);
            }
-          data[i] = elem;
+          if (timestamps == "aligned") {
+            data[i] = elem;
+          } else {
+            for (var j = 0; j < numSeries; j++) {
+              var elemCopy = elem.slice(0);
+              elemCopy[0] += unalignmentDelta * j;
+              data[i*numSeries + j] = elemCopy;
+            }
+          }
+          if (!numeric) data[i][0] = new Date(data[i][0]);
          }
          var labels = [ "x" ];
          for (var j = 0; j < numSeries; j++) {
@@ -83,6 +97,7 @@
          var rollPeriod = parseInt(
              document.getElementById('rollPeriod').value);
          var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
+        opts['fillGraph'] = document.getElementById('fill').checked;
          var millisecondss = [];
          for (var i = 0; i < repetitions; i++) {
            if (graph != null) {
@@ -91,7 +106,7 @@
            var start = new Date();
            graph = new Dygraph(plotDiv, data, opts);
            var end = new Date();
-          durations.push([start, end - start]);
+          durations.push([numRuns++, end - start]);
            millisecondss.push(end - start);
          }
          if (repetitions == 1) {
@@ -104,7 +119,7 @@
            }
            avg/=millisecondss.length; 
            document.getElementById('message').innerHTML =
-              "Durations: " + millisecondss + " Average: " + avg;
+              "Durations: " + millisecondss + "<br>Average: " + avg;
          }
  
          if (durations.length > 0) {
@@ -124,18 +139,23 @@
            document.getElementById("metaperformance").innerHTML =
                "completed in " + (end2 - start2) + " milliseconds.";
          }
+
+        return millisecondss;
        };
        
-      clickedRadioButton = function(radiobutton) {
+      setDataType = function(radiobutton) {
          dataType = radiobutton.value;
        };
+      setTimestampType = function(radiobutton) {
+        timestamps = radiobutton.value;
+      };
  
        var values = {
          points: 100,
          series: 1,
          rollPeriod: 1,
          repetitions: 1,
-        type: 'sine',
+        type: 'sine'
        };
  
        // Parse the URL for parameters. Use it to override the values hash.