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

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../css/dygraph.css">
    <title>Benchmarking for Plots with Many Points</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dist/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>    
    <div id='parameters'>
      <p>Data to plot:
        <input type="radio" id="sine" name="group1" value="sine"
          onclick="setDataType(this);" checked> sinusoid function
        <input type="radio" id="rand" name="group1" value="rand"
          onclick="setDataType(this);"> random points <br></p>
      <p>Timestamps:
        <input type="radio" id="aligned" name="timestamps" value="aligned" checked> aligned
        <input type="radio" id="unaligned" name="timestamps" value="unaligned"> unaligned
      </p>
      <p>x-axis type:
        <input type="radio" id="numeric" name="x-axis-type" value="numeric" onclick="setXAxisType(this)" checked> numeric
        <input type="radio" id="dates" name="x-axis-type" value="date" onclick="setXAxisType(this)"> date/time
      <p><input type="checkbox" id="fill"><label for="fill"> Fill?</label></p>
      <p>Number of points per series (points):
         <input type="text" id="points" size="20"></p>
      <p>Number of series (series):
         <input type="text" id="series" size="20"></p>
      <p>Roll period (in points, rollPeriod):
        <input type="text" id="rollPeriod" size="20"></p>
      <p>Repetitions (repititions):
        <input type="text" id="repetitions" size="20"></p>
      <input type="button" value="Go!" onclick="updatePlot();">
    </div>
    <br>
    <br>
    <div id="plot"></div>
    <div id="message"></div>
    <div id="metrics"></div>
    <div id="metaperformance"></div>

    <script type="text/javascript">
      var graph = null;
      var metrics = null;
      var dataType = "sine";
      var timestamps = "aligned";
      var numRuns = 0;

      var durations = [];
      updatePlot = function() {
        document.getElementById('message').innerHTML = "";
        var plotDiv = document.getElementById('plot');
        plotDiv.innerHTML = 'Redrawing...';
        var numeric = document.getElementById('numeric').checked;
        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 = numeric ? 0.0 : Date.parse("2014/01/01");
        var xmax = numeric ? 2.0 * Math.PI : Date.parse("2014/12/31");
        var adj = .5;
        var delta = (xmax - xmin) / (numPoints - 1);
        var unalignmentDelta = delta / numSeries;

        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);
          }
          if (timestamps == "aligned") {
            data[i] = elem;
          } else {
            for (var j = 0; j < numSeries; j++) {
              var elemCopy = elem.slice(0);
              elemCopy[0] += unalignmentDelta * j;
              data[i*numSeries + j] = elemCopy;
            }
          }
          if (!numeric) data[i][0] = new Date(data[i][0]);
        }
        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"};
        opts['fillGraph'] = document.getElementById('fill').checked;
        var millisecondss = [];
        for (var i = 0; i < repetitions; i++) {
          if (graph != null) {
            graph.destroy(); // release memory from prior graph.
          }
          var start = new Date();
          graph = new Dygraph(plotDiv, data, opts);
          var end = new Date();
          durations.push([numRuns++, 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 + "<br>Average: " + avg;
        }

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

        return millisecondss;
      };
      
      setDataType = function(radiobutton) {
        dataType = radiobutton.value;
      };
      setTimestampType = function(radiobutton) {
        timestamps = 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>
93a5bb4c	4	<link rel="stylesheet" href="../css/dygraph.css">
15b00ba8	5	<title>Benchmarking for Plots with Many Points</title>
7e5ddc94 DV	6	<!--
	7	For production (minified) code, use:
	8	<script type="text/javascript" src="dygraph-combined.js"></script>
	9	-->
fbd6834a	10	<script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94	11
15b00ba8 JB	12	</head>
	13	<body>
	14	<p>Plot which can be easily generated with different numbers of points for
	15	benchmarking/profiling and improving performance of dygraphs.</p>
5ecfa608 RK	16	<div id='parameters'>
	17	<p>Data to plot:
	18	<input type="radio" id="sine" name="group1" value="sine"
0a14b0f9	19	onclick="setDataType(this);" checked> sinusoid function
5ecfa608	20	<input type="radio" id="rand" name="group1" value="rand"
0a14b0f9 AV	21	onclick="setDataType(this);"> random points <br></p>
0a14b0f9 AV	22	<p>Timestamps:
4c9d65da DV	23	<input type="radio" id="aligned" name="timestamps" value="aligned" checked> aligned
	24	<input type="radio" id="unaligned" name="timestamps" value="unaligned"> unaligned
	25	</p>
	26	<p>x-axis type:
	27	<input type="radio" id="numeric" name="x-axis-type" value="numeric" onclick="setXAxisType(this)" checked> numeric
	28	<input type="radio" id="dates" name="x-axis-type" value="date" onclick="setXAxisType(this)"> date/time
9ab15431	29	<p><input type="checkbox" id="fill"><label for="fill"> Fill?</label></p>
0a14b0f9	30	<p>Number of points per series (points):
5ecfa608	31	<input type="text" id="points" size="20"></p>
6f417f78	32	<p>Number of series (series):
5ecfa608	33	<input type="text" id="series" size="20"></p>
6f417f78	34	<p>Roll period (in points, rollPeriod):
5ecfa608	35	<input type="text" id="rollPeriod" size="20"></p>
6f417f78	36	<p>Repetitions (repititions):
5ecfa608 RK	37	<input type="text" id="repetitions" size="20"></p>
	38	<input type="button" value="Go!" onclick="updatePlot();">
	39	</div>
15b00ba8 JB	40	<br>
	41	<br>
	42	<div id="plot"></div>
09c17553	43	<div id="message"></div>
f7adb3d7	44	<div id="metrics"></div>
62c2a51e	45	<div id="metaperformance"></div>
15b00ba8 JB	46
15b00ba8 JB	47	<script type="text/javascript">
5ecfa608 RK	48	var graph = null;
5ecfa608 RK	49	var metrics = null;
a058247d	50	var dataType = "sine";
0a14b0f9	51	var timestamps = "aligned";
4c9d65da	52	var numRuns = 0;
15b00ba8	53
62c2a51e	54	var durations = [];
15b00ba8	55	updatePlot = function() {
09c17553	56	document.getElementById('message').innerHTML = "";
15b00ba8 JB	57	var plotDiv = document.getElementById('plot');
15b00ba8 JB	58	plotDiv.innerHTML = 'Redrawing...';
4c9d65da	59	var numeric = document.getElementById('numeric').checked;
15b00ba8	60	var numPoints =
bbba718a	61	parseInt(document.getElementById('points').value);
09c17553	62	var numSeries =
bbba718a	63	parseInt(document.getElementById('series').value);
f7adb3d7 RK	64	var repetitions =
f7adb3d7 RK	65	parseInt(document.getElementById('repetitions').value);
09c17553	66
15b00ba8	67	var data = [];
4c9d65da DV	68	var xmin = numeric ? 0.0 : Date.parse("2014/01/01");
4c9d65da DV	69	var xmax = numeric ? 2.0 * Math.PI : Date.parse("2014/12/31");
09c17553	70	var adj = .5;
15b00ba8	71	var delta = (xmax - xmin) / (numPoints - 1);
0a14b0f9	72	var unalignmentDelta = delta / numSeries;
15b00ba8 JB	73
	74	for (var i = 0; i < numPoints; ++i) {
	75	var x = xmin + delta * i;
09c17553 RK	76	var elem = [ x ];
09c17553 RK	77	for (var j = 0; j < numSeries; j++) {
a058247d AR	78	var y;
a058247d AR	79	if (dataType == "rand") {
36d73927	80	y = Math.pow(Math.random() - Math.random(), 7);
a058247d AR	81	} else {
	82	y = Math.sin(x + (j * adj));
	83	}
09c17553 RK	84	elem.push(y);
09c17553 RK	85	}
0a14b0f9 AV	86	if (timestamps == "aligned") {
	87	data[i] = elem;
	88	} else {
	89	for (var j = 0; j < numSeries; j++) {
	90	var elemCopy = elem.slice(0);
	91	elemCopy[0] += unalignmentDelta * j;
	92	data[i*numSeries + j] = elemCopy;
	93	}
	94	}
4c9d65da	95	if (!numeric) data[i][0] = new Date(data[i][0]);
09c17553 RK	96	}
	97	var labels = [ "x" ];
	98	for (var j = 0; j < numSeries; j++) {
36d73927	99	labels.push("data-set-" + j);
15b00ba8	100	}
15b00ba8	101	var rollPeriod = parseInt(
bbba718a	102	document.getElementById('rollPeriod').value);
7153e001	103	var opts = {labels: labels, rollPeriod: rollPeriod, timingName: "x"};
9ab15431	104	opts['fillGraph'] = document.getElementById('fill').checked;
62c2a51e	105	var millisecondss = [];
f7adb3d7	106	for (var i = 0; i < repetitions; i++) {
5ecfa608 RK	107	if (graph != null) {
	108	graph.destroy(); // release memory from prior graph.
	109	}
f7adb3d7	110	var start = new Date();
5ecfa608	111	graph = new Dygraph(plotDiv, data, opts);
f7adb3d7	112	var end = new Date();
4c9d65da	113	durations.push([numRuns++, end - start]);
62c2a51e	114	millisecondss.push(end - start);
f7adb3d7 RK	115	}
	116	if (repetitions == 1) {
	117	document.getElementById('message').innerHTML =
	118	"completed in " + (end - start) + " milliseconds.";
	119	} else {
a11725ce AR	120	var avg = 0;
	121	for (var i = 0; i < millisecondss.length; i++) {
	122	avg+=millisecondss[i];
	123	}
	124	avg/=millisecondss.length;
f7adb3d7	125	document.getElementById('message').innerHTML =
4c9d65da	126	"Durations: " + millisecondss + "<br>Average: " + avg;
f7adb3d7	127	}
15b00ba8	128
62c2a51e RK	129	if (durations.length > 0) {
62c2a51e RK	130	var start2 = new Date();
5ecfa608 RK	131	if (!metrics) {
	132	metrics = new Dygraph(
	133	document.getElementById('metrics'),
	134	durations,
	135	{
	136	highlightCircleSize: 4,
	137	labels: [ "Date", "ms" ]
	138	});
	139	} else {
	140	metrics.updateOptions({file: durations});
	141	}
62c2a51e RK	142	var end2 = new Date();
	143	document.getElementById("metaperformance").innerHTML =
	144	"completed in " + (end2 - start2) + " milliseconds.";
f7adb3d7	145	}
c3fa4a74 DV	146
c3fa4a74 DV	147	return millisecondss;
62c2a51e	148	};
a058247d	149
0a14b0f9	150	setDataType = function(radiobutton) {
a058247d AR	151	dataType = radiobutton.value;
a058247d AR	152	};
0a14b0f9 AV	153	setTimestampType = function(radiobutton) {
	154	timestamps = radiobutton.value;
	155	};
f7adb3d7	156
bbba718a RK	157	var values = {
	158	points: 100,
	159	series: 1,
	160	rollPeriod: 1,
	161	repetitions: 1,
375adb8f	162	type: 'sine'
bbba718a RK	163	};
	164
	165	// Parse the URL for parameters. Use it to override the values hash.
	166	var href = window.location.href;
	167	var qmindex = href.indexOf('?');
	168	if (qmindex > 0) {
	169	var entries = href.substr(qmindex + 1).split('&');
	170	for (var idx = 0; idx < entries.length; idx++) {
	171	var entry = entries[idx];
	172	var eindex = entry.indexOf('=');
	173	if (eindex > 0) {
	174	values[entry.substr(0, eindex)] = entry.substr(eindex + 1);
	175	}
	176	}
	177	}
	178
	179	var populate = function(name) {
	180	document.getElementById(name).value = values[name];
	181	}
	182
	183	var populateRadio = function(name) {
	184	var val = values[name];
	185	var elem = document.getElementById(val);
	186	elem.checked = true;
	187	elem.onclick();
	188	}
	189
	190	populate('points');
	191	populate('series');
	192	populate('rollPeriod');
	193	populate('repetitions');
	194	populateRadio('type');
	195	if (values["go"]) {
	196	updatePlot();
	197	}
15b00ba8 JB	198	</script>
	199	</body>
	200	</html>