[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>Data to plot:
      <input type="radio" id="sine" name="group1" value="sine"
        onclick="clickedRadioButton(this);" checked> sinusoid function
      <input type="radio" id="rand" name="group1" value="rand"
        onclick="clickedRadioButton(this);"> random points <br></p>
    <p>Number of points:
       <input type="text" id="points" size="20"></p>
    <p>Number of series:
       <input type="text" id="series" size="20"></p>
    <p>Roll period (in points):
      <input type="text" id="rollPeriod" 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 dataType = "sine";

      var durations = [];
      updatePlot = function() {
        document.getElementById('message').innerHTML = "";
        var plotDiv = document.getElementById('plot');
        plotDiv.innerHTML = 'Redrawing...';
        var numPoints =
            parseInt(document.getElementById('points').value);
        var numSeries =
            parseInt(document.getElementById('series').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;
            if (dataType == "rand") {
              y = Math.pow(Math.random() - Math.random(), 7);
            } else {
              y = Math.sin(x + (j * adj));
            }
            elem.push(y);
          }
          data[i] = elem;
        }
        var labels = [ "x" ];
        for (var j = 0; j < numSeries; j++) {
          labels.push("data-set-" + j);
        }
        var rollPeriod = parseInt(
            document.getElementById('rollPeriod').value);
        var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
        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 {
          var avg = 0;
          for (var i = 0; i < millisecondss.length; i++) {
            avg+=millisecondss[i];
          }
          avg/=millisecondss.length; 
          document.getElementById('message').innerHTML =
              "Durations: " + millisecondss + " Average: " + avg;
        }

        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.";
        }
      };
      
      clickedRadioButton = function(radiobutton) {
        dataType = radiobutton.value;
      };

      var values = {
        points: 100,
        series: 1,
        rollPeriod: 1,
        repetitions: 1,
        type: 'sine'
      };

      // Parse the URL for parameters. Use it to override the values hash.
      var href = window.location.href;
      var qmindex = href.indexOf('?');
      if (qmindex > 0) {
        var entries = href.substr(qmindex + 1).split('&');
        for (var idx = 0; idx < entries.length; idx++) {
          var entry = entries[idx];
          var eindex = entry.indexOf('=');
          if (eindex > 0) {
            values[entry.substr(0, eindex)] = entry.substr(eindex + 1);
          }
        }
      }

      var populate = function(name) {
        document.getElementById(name).value = values[name];
      }

      var populateRadio = function(name) {
        var val = values[name];
        var elem = document.getElementById(val);
        elem.checked = true;
        elem.onclick();
      }

      populate('points');
      populate('series');
      populate('rollPeriod');
      populate('repetitions');
      populateRadio('type');
      if (values["go"]) {
        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]-->
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>
a058247d	19	<p>Data to plot:
bbba718a RK	20	<input type="radio" id="sine" name="group1" value="sine"
	21	onclick="clickedRadioButton(this);" checked> sinusoid function
	22	<input type="radio" id="rand" name="group1" value="rand"
	23	onclick="clickedRadioButton(this);"> random points <br></p>
15b00ba8	24	<p>Number of points:
bbba718a	25	<input type="text" id="points" size="20"></p>
09c17553	26	<p>Number of series:
bbba718a	27	<input type="text" id="series" size="20"></p>
15b00ba8	28	<p>Roll period (in points):
bbba718a	29	<input type="text" id="rollPeriod" size="20"></p>
f7adb3d7	30	<p>Repetitions:
62c2a51e RK	31	<input type="text" id="repetitions" size="20"></p>
	32
	33	<input type="button" value="Go!" onclick="updatePlot();">
15b00ba8 JB	34	<br>
	35	<br>
	36	<div id="plot"></div>
09c17553	37	<div id="message"></div>
f7adb3d7	38	<div id="metrics"></div>
62c2a51e	39	<div id="metaperformance"></div>
15b00ba8 JB	40
	41	<script type="text/javascript">
	42	var plot;
a058247d	43	var dataType = "sine";
15b00ba8	44
62c2a51e	45	var durations = [];
15b00ba8	46	updatePlot = function() {
09c17553	47	document.getElementById('message').innerHTML = "";
15b00ba8 JB	48	var plotDiv = document.getElementById('plot');
	49	plotDiv.innerHTML = 'Redrawing...';
	50	var numPoints =
bbba718a	51	parseInt(document.getElementById('points').value);
09c17553	52	var numSeries =
bbba718a	53	parseInt(document.getElementById('series').value);
f7adb3d7 RK	54	var repetitions =
f7adb3d7 RK	55	parseInt(document.getElementById('repetitions').value);
09c17553	56
15b00ba8 JB	57	var data = [];
	58	var xmin = 0.0;
	59	var xmax = 2.0 * Math.PI;
09c17553	60	var adj = .5;
15b00ba8 JB	61	var delta = (xmax - xmin) / (numPoints - 1);
	62
	63	for (var i = 0; i < numPoints; ++i) {
	64	var x = xmin + delta * i;
09c17553 RK	65	var elem = [ x ];
09c17553 RK	66	for (var j = 0; j < numSeries; j++) {
a058247d AR	67	var y;
a058247d AR	68	if (dataType == "rand") {
36d73927	69	y = Math.pow(Math.random() - Math.random(), 7);
a058247d AR	70	} else {
	71	y = Math.sin(x + (j * adj));
	72	}
09c17553 RK	73	elem.push(y);
	74	}
	75	data[i] = elem;
	76	}
	77	var labels = [ "x" ];
	78	for (var j = 0; j < numSeries; j++) {
36d73927	79	labels.push("data-set-" + j);
15b00ba8	80	}
15b00ba8	81	var rollPeriod = parseInt(
bbba718a	82	document.getElementById('rollPeriod').value);
7153e001	83	var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
62c2a51e	84	var millisecondss = [];
f7adb3d7 RK	85	for (var i = 0; i < repetitions; i++) {
	86	var start = new Date();
	87	plot = new Dygraph(plotDiv, data, opts);
	88	var end = new Date();
62c2a51e RK	89	durations.push([start, end - start]);
62c2a51e RK	90	millisecondss.push(end - start);
f7adb3d7 RK	91	}
	92	if (repetitions == 1) {
	93	document.getElementById('message').innerHTML =
	94	"completed in " + (end - start) + " milliseconds.";
	95	} else {
a11725ce AR	96	var avg = 0;
	97	for (var i = 0; i < millisecondss.length; i++) {
	98	avg+=millisecondss[i];
	99	}
	100	avg/=millisecondss.length;
f7adb3d7	101	document.getElementById('message').innerHTML =
a11725ce	102	"Durations: " + millisecondss + " Average: " + avg;
f7adb3d7	103	}
15b00ba8	104
62c2a51e RK	105	if (durations.length > 0) {
	106	var start2 = new Date();
	107	new Dygraph(
	108	document.getElementById('metrics'),
	109	durations,
	110	{
	111	highlightCircleSize: 4,
	112	labels: [ "Date", "ms" ]
	113	});
	114	var end2 = new Date();
	115	document.getElementById("metaperformance").innerHTML =
	116	"completed in " + (end2 - start2) + " milliseconds.";
f7adb3d7	117	}
62c2a51e	118	};
a058247d AR	119
	120	clickedRadioButton = function(radiobutton) {
	121	dataType = radiobutton.value;
	122	};
f7adb3d7	123
bbba718a RK	124	var values = {
	125	points: 100,
	126	series: 1,
	127	rollPeriod: 1,
	128	repetitions: 1,
	129	type: 'sine'
	130	};
	131
	132	// Parse the URL for parameters. Use it to override the values hash.
	133	var href = window.location.href;
	134	var qmindex = href.indexOf('?');
	135	if (qmindex > 0) {
	136	var entries = href.substr(qmindex + 1).split('&');
	137	for (var idx = 0; idx < entries.length; idx++) {
	138	var entry = entries[idx];
	139	var eindex = entry.indexOf('=');
	140	if (eindex > 0) {
	141	values[entry.substr(0, eindex)] = entry.substr(eindex + 1);
	142	}
	143	}
	144	}
	145
	146	var populate = function(name) {
	147	document.getElementById(name).value = values[name];
	148	}
	149
	150	var populateRadio = function(name) {
	151	var val = values[name];
	152	var elem = document.getElementById(val);
	153	elem.checked = true;
	154	elem.onclick();
	155	}
	156
	157	populate('points');
	158	populate('series');
	159	populate('rollPeriod');
	160	populate('repetitions');
	161	populateRadio('type');
	162	if (values["go"]) {
	163	updatePlot();
	164	}
15b00ba8 JB	165	</script>
	166	</body>
	167	</html>