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