tests/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" checked> aligned
  27         <input type="radio" id="unaligned" name="timestamps" value="unaligned"> unaligned
  28       </p>
  29       <p>x-axis type:
  30         <input type="radio" id="numeric" name="x-axis-type" value="numeric" onclick="setXAxisType(this)" checked> numeric
  31         <input type="radio" id="dates" name="x-axis-type" value="date" onclick="setXAxisType(this)"> date/time
  32       <p>Number of points per series (points):
  33          <input type="text" id="points" size="20"></p>
  34       <p>Number of series (series):
  35          <input type="text" id="series" size="20"></p>
  36       <p>Roll period (in points, rollPeriod):
  37         <input type="text" id="rollPeriod" size="20"></p>
  38       <p>Repetitions (repititions):
  39         <input type="text" id="repetitions" size="20"></p>
  40       <input type="button" value="Go!" onclick="updatePlot();">
  41     </div>
  42     <br>
  43     <br>
  44     <div id="plot"></div>
  45     <div id="message"></div>
  46     <div id="metrics"></div>
  47     <div id="metaperformance"></div>
  48
  49     <script type="text/javascript">
  50       var graph = null;
  51       var metrics = null;
  52       var dataType = "sine";
  53       var timestamps = "aligned";
  54       var numRuns = 0;
  55
  56       var durations = [];
  57       updatePlot = function() {
  58         document.getElementById('message').innerHTML = "";
  59         var plotDiv = document.getElementById('plot');
  60         plotDiv.innerHTML = 'Redrawing...';
  61         var numeric = document.getElementById('numeric').checked;
  62         var numPoints =
  63             parseInt(document.getElementById('points').value);
  64         var numSeries =
  65             parseInt(document.getElementById('series').value);
  66         var repetitions =
  67             parseInt(document.getElementById('repetitions').value);
  68
  69         var data = [];
  70         var xmin = numeric ? 0.0 : Date.parse("2014/01/01");
  71         var xmax = numeric ? 2.0 * Math.PI : Date.parse("2014/12/31");
  72         var adj = .5;
  73         var delta = (xmax - xmin) / (numPoints - 1);
  74         var unalignmentDelta = delta / numSeries;
  75
  76         for (var i = 0; i < numPoints; ++i) {
  77           var x = xmin + delta * i;
  78           var elem = [ x ];
  79           for (var j = 0; j < numSeries; j++) {
  80             var y;
  81             if (dataType == "rand") {
  82               y = Math.pow(Math.random() - Math.random(), 7);
  83             } else {
  84               y = Math.sin(x + (j * adj));
  85             }
  86             elem.push(y);
  87           }
  88           if (timestamps == "aligned") {
  89             data[i] = elem;
  90           } else {
  91             for (var j = 0; j < numSeries; j++) {
  92               var elemCopy = elem.slice(0);
  93               elemCopy[0] += unalignmentDelta * j;
  94               data[i*numSeries + j] = elemCopy;
  95             }
  96           }
  97           if (!numeric) data[i][0] = new Date(data[i][0]);
  98         }
  99         var labels = [ "x" ];
 100         for (var j = 0; j < numSeries; j++) {
 101           labels.push("data-set-" + j);
 102         }
 103         var rollPeriod = parseInt(
 104             document.getElementById('rollPeriod').value);
 105         var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
 106         var millisecondss = [];
 107         for (var i = 0; i < repetitions; i++) {
 108           if (graph != null) {
 109             graph.destroy(); // release memory from prior graph.
 110           }
 111           var start = new Date();
 112           graph = new Dygraph(plotDiv, data, opts);
 113           var end = new Date();
 114           durations.push([numRuns++, end - start]);
 115           millisecondss.push(end - start);
 116         }
 117         if (repetitions == 1) {
 118           document.getElementById('message').innerHTML =
 119               "completed in " + (end - start) + " milliseconds.";
 120         } else {
 121           var avg = 0;
 122           for (var i = 0; i < millisecondss.length; i++) {
 123             avg+=millisecondss[i];
 124           }
 125           avg/=millisecondss.length;
 126           document.getElementById('message').innerHTML =
 127               "Durations: " + millisecondss + "<br>Average: " + avg;
 128         }
 129
 130         if (durations.length > 0) {
 131           var start2 = new Date();
 132           if (!metrics) {
 133              metrics = new Dygraph(
 134                 document.getElementById('metrics'),
 135                 durations,
 136                 {
 137                   highlightCircleSize: 4,
 138                   labels: [ "Date", "ms" ]
 139                   });
 140           } else {
 141             metrics.updateOptions({file: durations});
 142           }
 143           var end2 = new Date();
 144           document.getElementById("metaperformance").innerHTML =
 145               "completed in " + (end2 - start2) + " milliseconds.";
 146         }
 147
 148         return millisecondss;
 149       };
 150
 151       setDataType = function(radiobutton) {
 152         dataType = radiobutton.value;
 153       };
 154       setTimestampType = function(radiobutton) {
 155         timestamps = radiobutton.value;
 156       };
 157
 158       var values = {
 159         points: 100,
 160         series: 1,
 161         rollPeriod: 1,
 162         repetitions: 1,
 163         type: 'sine'
 164       };
 165
 166       // Parse the URL for parameters. Use it to override the values hash.
 167       var href = window.location.href;
 168       var qmindex = href.indexOf('?');
 169       if (qmindex > 0) {
 170         var entries = href.substr(qmindex + 1).split('&');
 171         for (var idx = 0; idx < entries.length; idx++) {
 172           var entry = entries[idx];
 173           var eindex = entry.indexOf('=');
 174           if (eindex > 0) {
 175             values[entry.substr(0, eindex)] = entry.substr(eindex + 1);
 176           }
 177         }
 178       }
 179
 180       var populate = function(name) {
 181         document.getElementById(name).value = values[name];
 182       }
 183
 184       var populateRadio = function(name) {
 185         var val = values[name];
 186         var elem = document.getElementById(val);
 187         elem.checked = true;
 188         elem.onclick();
 189       }
 190
 191       populate('points');
 192       populate('series');
 193       populate('rollPeriod');
 194       populate('repetitions');
 195       populateRadio('type');
 196       if (values["go"]) {
 197         updatePlot();
 198       }
 199     </script>
 200   </body>
 201 </html>