dygraph-many-points-benchmark.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>Benchmarking for Plots with Many Points</title>
   6     <!--[if IE]>
   7     <script type="text/javascript" src="../excanvas.js"></script>
   8     <![endif]-->
   9     <!--
  10     For production (minified) code, use:
  11     <script type="text/javascript" src="dygraph-combined.js"></script>
  12     -->
  13     <script type="text/javascript" src="../dygraph-dev.js"></script>
  14
  15   </head>
  16   <body>
  17     <p>Plot which can be easily generated with different numbers of points for
  18        benchmarking/profiling and improving performance of dygraphs.</p>
  19     <div id='parameters'>
  20       <p>Data to plot:
  21         <input type="radio" id="sine" name="group1" value="sine"
  22           onclick="setDataType(this);" checked> sinusoid function
  23         <input type="radio" id="rand" name="group1" value="rand"
  24           onclick="setDataType(this);"> random points <br></p>
  25       <p>Timestamps:
  26         <input type="radio" id="aligned" name="timestamps" value="aligned"
  27           onclick="setTimestampType(this);" checked> aligned
  28         <input type="radio" id="unaligned" name="timestamps" value="unaligned"
  29           onclick="setTimestampType(this);"> unaligned</p>
  30       <p>Number of points per series (points):
  31          <input type="text" id="points" size="20"></p>
  32       <p>Number of series (series):
  33          <input type="text" id="series" size="20"></p>
  34       <p>Roll period (in points, rollPeriod):
  35         <input type="text" id="rollPeriod" size="20"></p>
  36       <p>Repetitions (repititions):
  37         <input type="text" id="repetitions" size="20"></p>
  38       <input type="button" value="Go!" onclick="updatePlot();">
  39     </div>
  40     <br>
  41     <br>
  42     <div id="plot"></div>
  43     <div id="message"></div>
  44     <div id="metrics"></div>
  45     <div id="metaperformance"></div>
  46
  47     <script type="text/javascript">
  48       var graph = null;
  49       var metrics = null;
  50       var dataType = "sine";
  51       var timestamps = "aligned";
  52
  53       var durations = [];
  54       updatePlot = function() {
  55         document.getElementById('message').innerHTML = "";
  56         var plotDiv = document.getElementById('plot');
  57         plotDiv.innerHTML = 'Redrawing...';
  58         var numPoints =
  59             parseInt(document.getElementById('points').value);
  60         var numSeries =
  61             parseInt(document.getElementById('series').value);
  62         var repetitions =
  63             parseInt(document.getElementById('repetitions').value);
  64
  65         var data = [];
  66         var xmin = 0.0;
  67         var xmax = 2.0 * Math.PI;
  68         var adj = .5;
  69         var delta = (xmax - xmin) / (numPoints - 1);
  70         var unalignmentDelta = delta / numSeries;
  71
  72         for (var i = 0; i < numPoints; ++i) {
  73           var x = xmin + delta * i;
  74           var elem = [ x ];
  75           for (var j = 0; j < numSeries; j++) {
  76             var y;
  77             if (dataType == "rand") {
  78               y = Math.pow(Math.random() - Math.random(), 7);
  79             } else {
  80               y = Math.sin(x + (j * adj));
  81             }
  82             elem.push(y);
  83           }
  84           if (timestamps == "aligned") {
  85             data[i] = elem;
  86           } else {
  87             for (var j = 0; j < numSeries; j++) {
  88               var elemCopy = elem.slice(0);
  89               elemCopy[0] += unalignmentDelta * j;
  90               data[i*numSeries + j] = elemCopy;
  91             }
  92           }
  93         }
  94         var labels = [ "x" ];
  95         for (var j = 0; j < numSeries; j++) {
  96           labels.push("data-set-" + j);
  97         }
  98         var rollPeriod = parseInt(
  99             document.getElementById('rollPeriod').value);
 100         var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
 101         var millisecondss = [];
 102         for (var i = 0; i < repetitions; i++) {
 103           if (graph != null) {
 104             graph.destroy(); // release memory from prior graph.
 105           }
 106           var start = new Date();
 107           graph = new Dygraph(plotDiv, data, opts);
 108           var end = new Date();
 109           durations.push([start, end - start]);
 110           millisecondss.push(end - start);
 111         }
 112         if (repetitions == 1) {
 113           document.getElementById('message').innerHTML =
 114               "completed in " + (end - start) + " milliseconds.";
 115         } else {
 116           var avg = 0;
 117           for (var i = 0; i < millisecondss.length; i++) {
 118             avg+=millisecondss[i];
 119           }
 120           avg/=millisecondss.length;
 121           document.getElementById('message').innerHTML =
 122               "Durations: " + millisecondss + " Average: " + avg;
 123         }
 124
 125         if (durations.length > 0) {
 126           var start2 = new Date();
 127           if (!metrics) {
 128              metrics = new Dygraph(
 129                 document.getElementById('metrics'),
 130                 durations,
 131                 {
 132                   highlightCircleSize: 4,
 133                   labels: [ "Date", "ms" ]
 134                   });
 135           } else {
 136             metrics.updateOptions({file: durations});
 137           }
 138           var end2 = new Date();
 139           document.getElementById("metaperformance").innerHTML =
 140               "completed in " + (end2 - start2) + " milliseconds.";
 141         }
 142
 143         return millisecondss;
 144       };
 145
 146       setDataType = function(radiobutton) {
 147         dataType = radiobutton.value;
 148       };
 149       setTimestampType = function(radiobutton) {
 150         timestamps = radiobutton.value;
 151       };
 152
 153       var values = {
 154         points: 100,
 155         series: 1,
 156         rollPeriod: 1,
 157         repetitions: 1,
 158         type: 'sine'
 159       };
 160
 161       // Parse the URL for parameters. Use it to override the values hash.
 162       var href = window.location.href;
 163       var qmindex = href.indexOf('?');
 164       if (qmindex > 0) {
 165         var entries = href.substr(qmindex + 1).split('&');
 166         for (var idx = 0; idx < entries.length; idx++) {
 167           var entry = entries[idx];
 168           var eindex = entry.indexOf('=');
 169           if (eindex > 0) {
 170             values[entry.substr(0, eindex)] = entry.substr(eindex + 1);
 171           }
 172         }
 173       }
 174
 175       var populate = function(name) {
 176         document.getElementById(name).value = values[name];
 177       }
 178
 179       var populateRadio = function(name) {
 180         var val = values[name];
 181         var elem = document.getElementById(val);
 182         elem.checked = true;
 183         elem.onclick();
 184       }
 185
 186       populate('points');
 187       populate('series');
 188       populate('rollPeriod');
 189       populate('repetitions');
 190       populateRadio('type');
 191       if (values["go"]) {
 192         updatePlot();
 193       }
 194     </script>
 195   </body>
 196 </html>