[dygraphs.git] / tests / dygraph-many-points-benchmark.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Benchmarking for Plots with Many Points</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
    <script type="text/javascript" src="../dygraph-canvas.js"></script>
    <script type="text/javascript" src="../dygraph.js"></script>
  </head>
  <body>
    <p>Plot which can be easily generated with different numbers of points for
       benchmarking/profiling and improving performance of dygraphs.</p>    
    <p>Number of points:
       <input type="text" id="num_points_input" size="20"
              onchange="updatePlot();"></p>
    <p>Number of series:
       <input type="text" id="num_series_input" size="20"
              onchange="updatePlot();"></p>
    <p>Roll period (in points):
      <input type="text" id="roll_period_input" size="20"
              onchange="updatePlot();"></p>
    <br>
    <br>
    <div id="plot"></div>
    <div id="message"></div>

    <script type="text/javascript">
      var plot;

      updatePlot = function() {
        document.getElementById('message').innerHTML = "";
        var plotDiv = document.getElementById('plot');
        plotDiv.innerHTML = 'Redrawing...';
        var numPoints =
            parseInt(document.getElementById('num_points_input').value);
        var numSeries =
            parseInt(document.getElementById('num_series_input').value);

        var data = [];
        var xmin = 0.0;
        var xmax = 2.0 * Math.PI;
        var adj = .5;
        var delta = (xmax - xmin) / (numPoints - 1);

        for (var i = 0; i < numPoints; ++i) {
          var x = xmin + delta * i;
          var elem = [ x ];
          for (var j = 0; j < numSeries; j++) {
            var y = Math.sin(x + (j * adj));
            elem.push(y);
          }
          data[i] = elem;
        }
        var labels = [ "x" ];
        for (var j = 0; j < numSeries; j++) {
          labels.push("sin(x + " + (j*adj) + ")");
        }
        var rollPeriod = parseInt(
            document.getElementById('roll_period_input').value);
        var opts = {labels: labels, rollPeriod: rollPeriod};
        var start = new Date();
        plot = new Dygraph(plotDiv, data, opts);
        var end = new Date();
        document.getElementById('message').innerHTML =
            "completed in " + (end - start) + " milliseconds.";
      };

      document.getElementById('num_points_input').value = '100';
      document.getElementById('num_series_input').value = '1';
      document.getElementById('roll_period_input').value = '1';
      updatePlot();
    </script>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
15b00ba8 JB	2	<html>
15b00ba8 JB	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
15b00ba8 JB	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>
09c17553 RK	20	<p>Number of series:
	21	<input type="text" id="num_series_input" size="20"
	22	onchange="updatePlot();"></p>
15b00ba8 JB	23	<p>Roll period (in points):
	24	<input type="text" id="roll_period_input" size="20"
	25	onchange="updatePlot();"></p>
	26	<br>
	27	<br>
	28	<div id="plot"></div>
09c17553	29	<div id="message"></div>
15b00ba8 JB	30
	31	<script type="text/javascript">
	32	var plot;
	33
	34	updatePlot = function() {
09c17553	35	document.getElementById('message').innerHTML = "";
15b00ba8 JB	36	var plotDiv = document.getElementById('plot');
	37	plotDiv.innerHTML = 'Redrawing...';
	38	var numPoints =
	39	parseInt(document.getElementById('num_points_input').value);
09c17553 RK	40	var numSeries =
	41	parseInt(document.getElementById('num_series_input').value);
	42
15b00ba8 JB	43	var data = [];
	44	var xmin = 0.0;
	45	var xmax = 2.0 * Math.PI;
09c17553	46	var adj = .5;
15b00ba8 JB	47	var delta = (xmax - xmin) / (numPoints - 1);
	48
	49	for (var i = 0; i < numPoints; ++i) {
	50	var x = xmin + delta * i;
09c17553 RK	51	var elem = [ x ];
	52	for (var j = 0; j < numSeries; j++) {
	53	var y = Math.sin(x + (j * adj));
	54	elem.push(y);
	55	}
	56	data[i] = elem;
	57	}
	58	var labels = [ "x" ];
	59	for (var j = 0; j < numSeries; j++) {
	60	labels.push("sin(x + " + (j*adj) + ")");
15b00ba8	61	}
15b00ba8 JB	62	var rollPeriod = parseInt(
15b00ba8 JB	63	document.getElementById('roll_period_input').value);
09c17553 RK	64	var opts = {labels: labels, rollPeriod: rollPeriod};
09c17553 RK	65	var start = new Date();
15b00ba8	66	plot = new Dygraph(plotDiv, data, opts);
09c17553 RK	67	var end = new Date();
	68	document.getElementById('message').innerHTML =
	69	"completed in " + (end - start) + " milliseconds.";
15b00ba8 JB	70	};
	71
	72	document.getElementById('num_points_input').value = '100';
09c17553	73	document.getElementById('num_series_input').value = '1';
15b00ba8 JB	74	document.getElementById('roll_period_input').value = '1';
	75	updatePlot();
	76	</script>
	77	</body>
	78	</html>