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

<html>
  <head>
    <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>Roll period (in points):
      <input type="text" id="roll_period_input" size="20"
              onchange="updatePlot();"></p>
    <br>
    <br>
    <div id="plot"></div>

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

      updatePlot = function() {
        var plotDiv = document.getElementById('plot');
        plotDiv.innerHTML = 'Redrawing...';
        var numPoints =
            parseInt(document.getElementById('num_points_input').value);
        var data = [];
        var xmin = 0.0;
        var xmax = 2.0 * Math.PI;
        var delta = (xmax - xmin) / (numPoints - 1);

        for (var i = 0; i < numPoints; ++i) {
          var x = xmin + delta * i;
          var y = Math.sin(x);
          data[i] = [x, y];
        }

        var rollPeriod = parseInt(
            document.getElementById('roll_period_input').value);
        var opts = {labels: ['x', 'sin(x)'], rollPeriod: rollPeriod};
        plot = new Dygraph(plotDiv, data, opts);
      };

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