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     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
  10     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  11     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  12     <script type="text/javascript" src="../dygraph.js"></script>
  13   </head>
  14   <body>
  15     <p>Plot which can be easily generated with different numbers of points for
  16        benchmarking/profiling and improving performance of dygraphs.</p>
  17     <p>Number of points:
  18        <input type="text" id="num_points_input" size="20"></p>
  19     <p>Number of series:
  20        <input type="text" id="num_series_input" size="20"></p>
  21     <p>Roll period (in points):
  22       <input type="text" id="roll_period_input" size="20"></p>
  23     <p>Repetitions:
  24       <input type="text" id="repetitions" size="20"></p>
  25
  26     <input type="button" value="Go!" onclick="updatePlot();">
  27     <br>
  28     <br>
  29     <div id="plot"></div>
  30     <div id="message"></div>
  31     <div id="metrics"></div>
  32     <div id="metaperformance"></div>
  33
  34     <script type="text/javascript">
  35       var plot;
  36
  37       var durations = [];
  38       updatePlot = function() {
  39         document.getElementById('message').innerHTML = "";
  40         var plotDiv = document.getElementById('plot');
  41         plotDiv.innerHTML = 'Redrawing...';
  42         var numPoints =
  43             parseInt(document.getElementById('num_points_input').value);
  44         var numSeries =
  45             parseInt(document.getElementById('num_series_input').value);
  46         var repetitions =
  47             parseInt(document.getElementById('repetitions').value);
  48
  49         var data = [];
  50         var xmin = 0.0;
  51         var xmax = 2.0 * Math.PI;
  52         var adj = .5;
  53         var delta = (xmax - xmin) / (numPoints - 1);
  54
  55         for (var i = 0; i < numPoints; ++i) {
  56           var x = xmin + delta * i;
  57           var elem = [ x ];
  58           for (var j = 0; j < numSeries; j++) {
  59             var y = Math.sin(x + (j * adj));
  60             elem.push(y);
  61           }
  62           data[i] = elem;
  63         }
  64         var labels = [ "x" ];
  65         for (var j = 0; j < numSeries; j++) {
  66           labels.push("sin(x + " + (j*adj) + ")");
  67         }
  68         var rollPeriod = parseInt(
  69             document.getElementById('roll_period_input').value);
  70         var opts = {labels: labels, rollPeriod: rollPeriod};
  71         var millisecondss = [];
  72         for (var i = 0; i < repetitions; i++) {
  73           var start = new Date();
  74           plot = new Dygraph(plotDiv, data, opts);
  75           var end = new Date();
  76           durations.push([start, end - start]);
  77           millisecondss.push(end - start);
  78         }
  79         if (repetitions == 1) {
  80           document.getElementById('message').innerHTML =
  81               "completed in " + (end - start) + " milliseconds.";
  82         } else {
  83           document.getElementById('message').innerHTML =
  84               "Durations: " + millisecondss;
  85         }
  86
  87         if (durations.length > 0) {
  88           var start2 = new Date();
  89           new Dygraph(
  90               document.getElementById('metrics'),
  91               durations,
  92               {
  93                 highlightCircleSize: 4,
  94                 labels: [ "Date", "ms" ]
  95                 });
  96           var end2 = new Date();
  97           document.getElementById("metaperformance").innerHTML =
  98               "completed in " + (end2 - start2) + " milliseconds.";
  99         }
 100       };
 101
 102       document.getElementById('num_points_input').value = '100';
 103       document.getElementById('num_series_input').value = '1';
 104       document.getElementById('roll_period_input').value = '1';
 105       document.getElementById('repetitions').value = '1';
 106     </script>
 107   </body>
 108 </html>