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     <p>Data to plot:
  20       <input type="radio" id="sine" name="group1" value="sine"
  21         onclick="clickedRadioButton(this);" checked> sinusoid function
  22       <input type="radio" id="rand" name="group1" value="rand"
  23         onclick="clickedRadioButton(this);"> random points <br></p>
  24     <p>Number of points:
  25        <input type="text" id="points" size="20"></p>
  26     <p>Number of series:
  27        <input type="text" id="series" size="20"></p>
  28     <p>Roll period (in points):
  29       <input type="text" id="rollPeriod" size="20"></p>
  30     <p>Repetitions:
  31       <input type="text" id="repetitions" size="20"></p>
  32
  33     <input type="button" value="Go!" onclick="updatePlot();">
  34     <br>
  35     <br>
  36     <div id="plot"></div>
  37     <div id="message"></div>
  38     <div id="metrics"></div>
  39     <div id="metaperformance"></div>
  40
  41     <script type="text/javascript">
  42       var plot;
  43       var dataType = "sine";
  44
  45       var durations = [];
  46       updatePlot = function() {
  47         document.getElementById('message').innerHTML = "";
  48         var plotDiv = document.getElementById('plot');
  49         plotDiv.innerHTML = 'Redrawing...';
  50         var numPoints =
  51             parseInt(document.getElementById('points').value);
  52         var numSeries =
  53             parseInt(document.getElementById('series').value);
  54         var repetitions =
  55             parseInt(document.getElementById('repetitions').value);
  56
  57         var data = [];
  58         var xmin = 0.0;
  59         var xmax = 2.0 * Math.PI;
  60         var adj = .5;
  61         var delta = (xmax - xmin) / (numPoints - 1);
  62
  63         for (var i = 0; i < numPoints; ++i) {
  64           var x = xmin + delta * i;
  65           var elem = [ x ];
  66           for (var j = 0; j < numSeries; j++) {
  67             var y;
  68             if (dataType == "rand") {
  69               y = Math.pow(Math.random() - Math.random(), 7);
  70             } else {
  71               y = Math.sin(x + (j * adj));
  72             }
  73             elem.push(y);
  74           }
  75           data[i] = elem;
  76         }
  77         var labels = [ "x" ];
  78         for (var j = 0; j < numSeries; j++) {
  79           labels.push("data-set-" + j);
  80         }
  81         var rollPeriod = parseInt(
  82             document.getElementById('rollPeriod').value);
  83         var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
  84         var millisecondss = [];
  85         for (var i = 0; i < repetitions; i++) {
  86           var start = new Date();
  87           plot = new Dygraph(plotDiv, data, opts);
  88           var end = new Date();
  89           durations.push([start, end - start]);
  90           millisecondss.push(end - start);
  91         }
  92         if (repetitions == 1) {
  93           document.getElementById('message').innerHTML =
  94               "completed in " + (end - start) + " milliseconds.";
  95         } else {
  96           var avg = 0;
  97           for (var i = 0; i < millisecondss.length; i++) {
  98             avg+=millisecondss[i];
  99           }
 100           avg/=millisecondss.length;
 101           document.getElementById('message').innerHTML =
 102               "Durations: " + millisecondss + " Average: " + avg;
 103         }
 104
 105         if (durations.length > 0) {
 106           var start2 = new Date();
 107           new Dygraph(
 108               document.getElementById('metrics'),
 109               durations,
 110               {
 111                 highlightCircleSize: 4,
 112                 labels: [ "Date", "ms" ]
 113                 });
 114           var end2 = new Date();
 115           document.getElementById("metaperformance").innerHTML =
 116               "completed in " + (end2 - start2) + " milliseconds.";
 117         }
 118       };
 119
 120       clickedRadioButton = function(radiobutton) {
 121         dataType = radiobutton.value;
 122       };
 123
 124       var values = {
 125         points: 100,
 126         series: 1,
 127         rollPeriod: 1,
 128         repetitions: 1,
 129         type: 'sine'
 130       };
 131
 132       // Parse the URL for parameters. Use it to override the values hash.
 133       var href = window.location.href;
 134       var qmindex = href.indexOf('?');
 135       if (qmindex > 0) {
 136         var entries = href.substr(qmindex + 1).split('&');
 137         for (var idx = 0; idx < entries.length; idx++) {
 138           var entry = entries[idx];
 139           var eindex = entry.indexOf('=');
 140           if (eindex > 0) {
 141             values[entry.substr(0, eindex)] = entry.substr(eindex + 1);
 142           }
 143         }
 144       }
 145
 146       var populate = function(name) {
 147         document.getElementById(name).value = values[name];
 148       }
 149
 150       var populateRadio = function(name) {
 151         var val = values[name];
 152         var elem = document.getElementById(val);
 153         elem.checked = true;
 154         elem.onclick();
 155       }
 156
 157       populate('points');
 158       populate('series');
 159       populate('rollPeriod');
 160       populate('repetitions');
 161       populateRadio('type');
 162       if (values["go"]) {
 163         updatePlot();
 164       }
 165     </script>
 166   </body>
 167 </html>