tests/dygraph-many-points-benchmark.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>Benchmarking for Plots with Many Points</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7
   8   </head>
   9   <body>
  10     <p>Plot which can be easily generated with different numbers of points for
  11        benchmarking/profiling and improving performance of dygraphs.</p>
  12     <div id='parameters'>
  13       <p>Data to plot:
  14         <input type="radio" id="sine" name="group1" value="sine"
  15           onclick="setDataType(this);" checked> sinusoid function
  16         <input type="radio" id="rand" name="group1" value="rand"
  17           onclick="setDataType(this);"> random points <br></p>
  18       <p>Timestamps:
  19         <input type="radio" id="aligned" name="timestamps" value="aligned" checked> aligned
  20         <input type="radio" id="unaligned" name="timestamps" value="unaligned"> unaligned
  21       </p>
  22       <p>x-axis type:
  23         <input type="radio" id="numeric" name="x-axis-type" value="numeric" onclick="setXAxisType(this)" checked> numeric
  24         <input type="radio" id="dates" name="x-axis-type" value="date" onclick="setXAxisType(this)"> date/time
  25       <p><input type="checkbox" id="fill"><label for="fill"> Fill?</label></p>
  26       <p>Number of points per series (points):
  27          <input type="text" id="points" size="20"></p>
  28       <p>Number of series (series):
  29          <input type="text" id="series" size="20"></p>
  30       <p>Roll period (in points, rollPeriod):
  31         <input type="text" id="rollPeriod" size="20"></p>
  32       <p>Repetitions (repititions):
  33         <input type="text" id="repetitions" size="20"></p>
  34       <input type="button" value="Go!" onclick="updatePlot();">
  35     </div>
  36     <br>
  37     <br>
  38     <div id="plot"></div>
  39     <div id="message"></div>
  40     <div id="metrics"></div>
  41     <div id="metaperformance"></div>
  42
  43     <script type="text/javascript">
  44       var graph = null;
  45       var metrics = null;
  46       var dataType = "sine";
  47       var timestamps = "aligned";
  48       var numRuns = 0;
  49
  50       var durations = [];
  51       updatePlot = function() {
  52         document.getElementById('message').innerHTML = "";
  53         var plotDiv = document.getElementById('plot');
  54         plotDiv.innerHTML = 'Redrawing...';
  55         var numeric = document.getElementById('numeric').checked;
  56         var numPoints =
  57             parseInt(document.getElementById('points').value);
  58         var numSeries =
  59             parseInt(document.getElementById('series').value);
  60         var repetitions =
  61             parseInt(document.getElementById('repetitions').value);
  62
  63         var data = [];
  64         var xmin = numeric ? 0.0 : Date.parse("2014/01/01");
  65         var xmax = numeric ? 2.0 * Math.PI : Date.parse("2014/12/31");
  66         var adj = .5;
  67         var delta = (xmax - xmin) / (numPoints - 1);
  68         var unalignmentDelta = delta / numSeries;
  69
  70         for (var i = 0; i < numPoints; ++i) {
  71           var x = xmin + delta * i;
  72           var elem = [ x ];
  73           for (var j = 0; j < numSeries; j++) {
  74             var y;
  75             if (dataType == "rand") {
  76               y = Math.pow(Math.random() - Math.random(), 7);
  77             } else {
  78               y = Math.sin(x + (j * adj));
  79             }
  80             elem.push(y);
  81           }
  82           if (timestamps == "aligned") {
  83             data[i] = elem;
  84           } else {
  85             for (var j = 0; j < numSeries; j++) {
  86               var elemCopy = elem.slice(0);
  87               elemCopy[0] += unalignmentDelta * j;
  88               data[i*numSeries + j] = elemCopy;
  89             }
  90           }
  91           if (!numeric) data[i][0] = new Date(data[i][0]);
  92         }
  93         var labels = [ "x" ];
  94         for (var j = 0; j < numSeries; j++) {
  95           labels.push("data-set-" + j);
  96         }
  97         var rollPeriod = parseInt(
  98             document.getElementById('rollPeriod').value);
  99         var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
 100         opts['fillGraph'] = document.getElementById('fill').checked;
 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([numRuns++, 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 + "<br>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>