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>Data to plot:
  20       <input type="radio" name="plot_group1" value="sine" onclick="clickedRadioButton(this);" checked> sinusoid function
  21       <input type="radio" name="plot_group1" value="rand" onclick="clickedRadioButton(this);"> random points <br></p>
  22     <p>Number of points:
  23        <input type="text" id="num_points_input" size="20"></p>
  24     <p>Number of series:
  25        <input type="text" id="num_series_input" size="20"></p>
  26     <p>Roll period (in points):
  27       <input type="text" id="roll_period_input" size="20"></p>
  28     <p>Repetitions:
  29       <input type="text" id="repetitions" size="20"></p>
  30
  31     <input type="button" value="Go!" onclick="updatePlot();">
  32     <br>
  33     <br>
  34     <div id="plot"></div>
  35     <div id="message"></div>
  36     <div id="metrics"></div>
  37     <div id="metaperformance"></div>
  38
  39     <script type="text/javascript">
  40       var plot;
  41       var dataType = "sine";
  42
  43       var durations = [];
  44       updatePlot = function() {
  45         document.getElementById('message').innerHTML = "";
  46         var plotDiv = document.getElementById('plot');
  47         plotDiv.innerHTML = 'Redrawing...';
  48         var numPoints =
  49             parseInt(document.getElementById('num_points_input').value);
  50         var numSeries =
  51             parseInt(document.getElementById('num_series_input').value);
  52         var repetitions =
  53             parseInt(document.getElementById('repetitions').value);
  54
  55         var data = [];
  56         var xmin = 0.0;
  57         var xmax = 2.0 * Math.PI;
  58         var adj = .5;
  59         var delta = (xmax - xmin) / (numPoints - 1);
  60
  61         for (var i = 0; i < numPoints; ++i) {
  62           var x = xmin + delta * i;
  63           var elem = [ x ];
  64           for (var j = 0; j < numSeries; j++) {
  65             var y;
  66             if (dataType == "rand") {
  67               y = Math.random() * 2 - 1;
  68             } else {
  69               y = Math.sin(x + (j * adj));
  70             }
  71             elem.push(y);
  72           }
  73           data[i] = elem;
  74         }
  75         var labels = [ "x" ];
  76         for (var j = 0; j < numSeries; j++) {
  77           labels.push("sin(x + " + (j*adj) + ")");
  78         }
  79         var rollPeriod = parseInt(
  80             document.getElementById('roll_period_input').value);
  81         var opts = {labels: labels, rollPeriod: rollPeriod};
  82         var millisecondss = [];
  83         for (var i = 0; i < repetitions; i++) {
  84           var start = new Date();
  85           plot = new Dygraph(plotDiv, data, opts);
  86           var end = new Date();
  87           durations.push([start, end - start]);
  88           millisecondss.push(end - start);
  89         }
  90         if (repetitions == 1) {
  91           document.getElementById('message').innerHTML =
  92               "completed in " + (end - start) + " milliseconds.";
  93         } else {
  94           var avg = 0;
  95           for (var i = 0; i < millisecondss.length; i++) {
  96             avg+=millisecondss[i];
  97           }
  98           avg/=millisecondss.length;
  99           document.getElementById('message').innerHTML =
 100               "Durations: " + millisecondss + " Average: " + avg;
 101         }
 102
 103         if (durations.length > 0) {
 104           var start2 = new Date();
 105           new Dygraph(
 106               document.getElementById('metrics'),
 107               durations,
 108               {
 109                 highlightCircleSize: 4,
 110                 labels: [ "Date", "ms" ]
 111                 });
 112           var end2 = new Date();
 113           document.getElementById("metaperformance").innerHTML =
 114               "completed in " + (end2 - start2) + " milliseconds.";
 115         }
 116       };
 117
 118       clickedRadioButton = function(radiobutton) {
 119         dataType = radiobutton.value;
 120       };
 121
 122
 123       document.getElementById('num_points_input').value = '100';
 124       document.getElementById('num_series_input').value = '1';
 125       document.getElementById('roll_period_input').value = '1';
 126       document.getElementById('repetitions').value = '1';
 127     </script>
 128   </body>
 129 </html>