tests/dygraph-many-points-benchmark.html

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