[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]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.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"></p>
    <p>Number of series:
       <input type="text" id="num_series_input" size="20"></p>
    <p>Roll period (in points):
      <input type="text" id="roll_period_input" size="20"></p>
    <p>Repetitions:
      <input type="text" id="repetitions" size="20"></p>

    <input type="button" value="Go!" onclick="updatePlot();">
    <br>
    <br>
    <div id="plot"></div>
    <div id="message"></div>
    <div id="metrics"></div>
    <div id="metaperformance"></div>

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

      var durations = [];
      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 repetitions =
            parseInt(document.getElementById('repetitions').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 millisecondss = [];
        for (var i = 0; i < repetitions; i++) {
          var start = new Date();
          plot = new Dygraph(plotDiv, data, opts);
          var end = new Date();
          durations.push([start, end - start]);
          millisecondss.push(end - start);
        }
        if (repetitions == 1) {
          document.getElementById('message').innerHTML =
              "completed in " + (end - start) + " milliseconds.";
        } else {
          document.getElementById('message').innerHTML =
              "Durations: " + millisecondss;
        }

        if (durations.length > 0) {
          var start2 = new Date();
          new Dygraph(
              document.getElementById('metrics'),
              durations,
              {
                highlightCircleSize: 4,
                labels: [ "Date", "ms" ]
                });
          var end2 = new Date();
          document.getElementById("metaperformance").innerHTML =
              "completed in " + (end2 - start2) + " milliseconds.";
        }
      };

      document.getElementById('num_points_input').value = '100';
      document.getElementById('num_series_input').value = '1';
      document.getElementById('roll_period_input').value = '1';
      document.getElementById('repetitions').value = '1';
    </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]-->
7e5ddc94 DV	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
15b00ba8 JB	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:
62c2a51e	20	<input type="text" id="num_points_input" size="20"></p>
09c17553	21	<p>Number of series:
62c2a51e	22	<input type="text" id="num_series_input" size="20"></p>
15b00ba8	23	<p>Roll period (in points):
62c2a51e	24	<input type="text" id="roll_period_input" size="20"></p>
f7adb3d7	25	<p>Repetitions:
62c2a51e RK	26	<input type="text" id="repetitions" size="20"></p>
	27
	28	<input type="button" value="Go!" onclick="updatePlot();">
15b00ba8 JB	29	<br>
	30	<br>
	31	<div id="plot"></div>
09c17553	32	<div id="message"></div>
f7adb3d7	33	<div id="metrics"></div>
62c2a51e	34	<div id="metaperformance"></div>
15b00ba8 JB	35
	36	<script type="text/javascript">
	37	var plot;
	38
62c2a51e	39	var durations = [];
15b00ba8	40	updatePlot = function() {
09c17553	41	document.getElementById('message').innerHTML = "";
15b00ba8 JB	42	var plotDiv = document.getElementById('plot');
	43	plotDiv.innerHTML = 'Redrawing...';
	44	var numPoints =
	45	parseInt(document.getElementById('num_points_input').value);
09c17553 RK	46	var numSeries =
09c17553 RK	47	parseInt(document.getElementById('num_series_input').value);
f7adb3d7 RK	48	var repetitions =
f7adb3d7 RK	49	parseInt(document.getElementById('repetitions').value);
09c17553	50
15b00ba8 JB	51	var data = [];
	52	var xmin = 0.0;
	53	var xmax = 2.0 * Math.PI;
09c17553	54	var adj = .5;
15b00ba8 JB	55	var delta = (xmax - xmin) / (numPoints - 1);
	56
	57	for (var i = 0; i < numPoints; ++i) {
	58	var x = xmin + delta * i;
09c17553 RK	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) + ")");
15b00ba8	69	}
15b00ba8 JB	70	var rollPeriod = parseInt(
15b00ba8 JB	71	document.getElementById('roll_period_input').value);
09c17553	72	var opts = {labels: labels, rollPeriod: rollPeriod};
62c2a51e	73	var millisecondss = [];
f7adb3d7 RK	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();
62c2a51e RK	78	durations.push([start, end - start]);
62c2a51e RK	79	millisecondss.push(end - start);
f7adb3d7 RK	80	}
	81	if (repetitions == 1) {
	82	document.getElementById('message').innerHTML =
	83	"completed in " + (end - start) + " milliseconds.";
	84	} else {
	85	document.getElementById('message').innerHTML =
62c2a51e	86	"Durations: " + millisecondss;
f7adb3d7	87	}
15b00ba8	88
62c2a51e RK	89	if (durations.length > 0) {
	90	var start2 = new Date();
	91	new Dygraph(
	92	document.getElementById('metrics'),
	93	durations,
	94	{
	95	highlightCircleSize: 4,
	96	labels: [ "Date", "ms" ]
	97	});
	98	var end2 = new Date();
	99	document.getElementById("metaperformance").innerHTML =
	100	"completed in " + (end2 - start2) + " milliseconds.";
f7adb3d7	101	}
62c2a51e	102	};
f7adb3d7	103
15b00ba8	104	document.getElementById('num_points_input').value = '100';
09c17553	105	document.getElementById('num_series_input').value = '1';
15b00ba8	106	document.getElementById('roll_period_input').value = '1';
f7adb3d7	107	document.getElementById('repetitions').value = '1';
15b00ba8 JB	108	</script>
	109	</body>
	110	</html>