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>Roll period (in points):
  21       <input type="text" id="roll_period_input" size="20"
  22               onchange="updatePlot();"></p>
  23     <br>
  24     <br>
  25     <div id="plot"></div>
  26
  27     <script type="text/javascript">
  28       var plot;
  29
  30       updatePlot = function() {
  31         var plotDiv = document.getElementById('plot');
  32         plotDiv.innerHTML = 'Redrawing...';
  33         var numPoints =
  34             parseInt(document.getElementById('num_points_input').value);
  35         var data = [];
  36         var xmin = 0.0;
  37         var xmax = 2.0 * Math.PI;
  38         var delta = (xmax - xmin) / (numPoints - 1);
  39
  40         for (var i = 0; i < numPoints; ++i) {
  41           var x = xmin + delta * i;
  42           var y = Math.sin(x);
  43           data[i] = [x, y];
  44         }
  45
  46         var rollPeriod = parseInt(
  47             document.getElementById('roll_period_input').value);
  48         var opts = {labels: ['x', 'sin(x)'], rollPeriod: rollPeriod};
  49         plot = new Dygraph(plotDiv, data, opts);
  50       };
  51
  52       document.getElementById('num_points_input').value = '100';
  53       document.getElementById('roll_period_input').value = '1';
  54       updatePlot();
  55     </script>
  56   </body>
  57 </html>