X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=tests%2Fdygraph-many-points-benchmark.html;h=ef8e682a6abd88e40d37a84512af273224515cfb;hb=dc836ebb77ab18a402ea4ae590059299d88b0deb;hp=7aadb191bfc2f2b67f689b1d5fd5d3ac2257830f;hpb=e26b71566419e1c051f3fbd1f4f8f64b063a04c9;p=dygraphs.git

diff --git a/tests/dygraph-many-points-benchmark.html b/tests/dygraph-many-points-benchmark.html
index 7aadb19..ef8e682 100644
--- a/tests/dygraph-many-points-benchmark.html
+++ b/tests/dygraph-many-points-benchmark.html
@@ -1,11 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
     <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>
@@ -19,16 +15,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 +47,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 +64,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 +82,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 +100,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 +109,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 +122,7 @@
           }
           avg/=millisecondss.length; 
           document.getElementById('message').innerHTML =
-              "Durations: " + millisecondss + " Average: " + avg;
+              "Durations: " + millisecondss + "<br>Average: " + avg;
         }
 
         if (durations.length > 0) {
@@ -124,18 +142,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.
