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