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