tests/dygraph-many-points-benchmark.html

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