tests/dygraph-many-points-benchmark.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Benchmarking for Plots with Many Points</title>
   5     <!--[if IE]>
   6     <script type="text/javascript" src="../excanvas.js"></script>
   7     <![endif]-->
   8     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   9     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  10     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  11     <script type="text/javascript" src="../dygraph.js"></script>
  12   </head>
  13   <body>
  14     <p>Plot which can be easily generated with different numbers of points for
  15        benchmarking/profiling and improving performance of dygraphs.</p>
  16     <p>Number of points:
  17        <input type="text" id="num_points_input" size="20"
  18               onchange="updatePlot();"></p>
  19     <p>Roll period (in points):
  20       <input type="text" id="roll_period_input" size="20"
  21               onchange="updatePlot();"></p>
  22     <br>
  23     <br>
  24     <div id="plot"></div>
  25
  26     <script type="text/javascript">
  27       var plot;
  28
  29       updatePlot = function() {
  30         var plotDiv = document.getElementById('plot');
  31         plotDiv.innerHTML = 'Redrawing...';
  32         var numPoints =
  33             parseInt(document.getElementById('num_points_input').value);
  34         var data = [];
  35         var xmin = 0.0;
  36         var xmax = 2.0 * Math.PI;
  37         var delta = (xmax - xmin) / (numPoints - 1);
  38
  39         for (var i = 0; i < numPoints; ++i) {
  40           var x = xmin + delta * i;
  41           var y = Math.sin(x);
  42           data[i] = [x, y];
  43         }
  44
  45         var rollPeriod = parseInt(
  46             document.getElementById('roll_period_input').value);
  47         var opts = {labels: ['x', 'sin(x)'], rollPeriod: rollPeriod};
  48         plot = new Dygraph(plotDiv, data, opts);
  49       };
  50
  51       document.getElementById('num_points_input').value = '100';
  52       document.getElementById('roll_period_input').value = '1';
  53       updatePlot();
  54     </script>
  55   </body>
  56 </html>