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"
  19               onchange="updatePlot();"></p>
  20     <p>Number of series:
  21        <input type="text" id="num_series_input" size="20"
  22               onchange="updatePlot();"></p>
  23     <p>Roll period (in points):
  24       <input type="text" id="roll_period_input" size="20"
  25               onchange="updatePlot();"></p>
  26     <br>
  27     <br>
  28     <div id="plot"></div>
  29     <div id="message"></div>
  30
  31     <script type="text/javascript">
  32       var plot;
  33
  34       updatePlot = function() {
  35         document.getElementById('message').innerHTML = "";
  36         var plotDiv = document.getElementById('plot');
  37         plotDiv.innerHTML = 'Redrawing...';
  38         var numPoints =
  39             parseInt(document.getElementById('num_points_input').value);
  40         var numSeries =
  41             parseInt(document.getElementById('num_series_input').value);
  42
  43         var data = [];
  44         var xmin = 0.0;
  45         var xmax = 2.0 * Math.PI;
  46         var adj = .5;
  47         var delta = (xmax - xmin) / (numPoints - 1);
  48
  49         for (var i = 0; i < numPoints; ++i) {
  50           var x = xmin + delta * i;
  51           var elem = [ x ];
  52           for (var j = 0; j < numSeries; j++) {
  53             var y = Math.sin(x + (j * adj));
  54             elem.push(y);
  55           }
  56           data[i] = elem;
  57         }
  58         var labels = [ "x" ];
  59         for (var j = 0; j < numSeries; j++) {
  60           labels.push("sin(x + " + (j*adj) + ")");
  61         }
  62         var rollPeriod = parseInt(
  63             document.getElementById('roll_period_input').value);
  64         var opts = {labels: labels, rollPeriod: rollPeriod};
  65         var start = new Date();
  66         plot = new Dygraph(plotDiv, data, opts);
  67         var end = new Date();
  68         document.getElementById('message').innerHTML =
  69             "completed in " + (end - start) + " milliseconds.";
  70       };
  71
  72       document.getElementById('num_points_input').value = '100';
  73       document.getElementById('num_series_input').value = '1';
  74       document.getElementById('roll_period_input').value = '1';
  75       updatePlot();
  76     </script>
  77   </body>
  78 </html>