[dygraphs.git] / test.html

<!-- This file serves as a test case for most of the dynamic graphs code -->
<html>
<head>

<!-- The packed versions are fine, I just use these for more meaningful error messages -->
<script type="text/javascript" src="mochikit_v14/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="plotkit_v091/PlotKit/PlotKit.js"></script>
<script type="text/javascript" src="plotkit_v091/PlotKit/Base.js"></script>
<script type="text/javascript" src="plotkit_v091/PlotKit/Layout.js"></script>
<script type="text/javascript" src="plotkit_v091/PlotKit/Canvas.js"></script>

<script type="text/javascript" src="dygraph-canvas.js"></script>
<script type="text/javascript" src="dygraph.js"></script>

<!--
<script type="text/javascript" src="dygraph-combined.js"></script>
-->
<script type="text/javascript" src="data.js"></script>

<!-- Test page load time -->
<script type="text/javascript">
var start_time = (new Date()).getTime();
setTimeout("testLoadTime();", 0);
function testLoadTime() {
  var clock = new Date();
  try {
    document.getElementById('loadingtime').innerHTML =
      "Loading time: " + (clock.getTime() - start_time) + "ms";
  } catch(e) {
    setTimeout("testLoadTime();", 100);
  }
}

function addGraphs() {
  g2 = new DateGraph(
          document.getElementById("graphdiv2"),
          function() {
            var r = "date,parabola,line,another line,sine wave\n";
            for (var i=1; i<=31; i++) {
            r += "" + i;
            r += "," + 10*(i*(31-i));
            r += "," + 10*(8*i);
            r += "," + 10*(250 - 8*i);
            r += "," + 10*(125 + 125 * Math.sin(0.3*i));
            r += "\n";
            }
            return r;
          },
          null,
          {
            labelsDiv: document.getElementById('status2'),
            labelsSeparateLines: true,
            labelsKMB: true,
            colors: ["hsl(180,60,50)",
                     "rgb(255,100,100)",
                     "#00DD55",
                     "rgba(50,50,200,0.4)"],
            padding: {left: 40, right: 30, top: 5, bottom: 15},
            xValueParser: function(x) { return parseFloat(x); },
            xValueFormatter: function(x) { return x; },
            xTicker: DateGraph.prototype.numericTicks,
            showRoller: false
          }
      );

  var end_time = (new Date('11/01/2006')).valueOf();
  var sixmonths = 366 / 2 * 24 * 60 * 60 * 1000;

  g = new DateGraph(
      document.getElementById("graphdiv1"),
      StubbedData,
      null,  // Labels are taken from the series themselves.
      { errorBars: true,
        rollPeriod: 7,
        minTickSize: 1,
        dateWindow: [end_time - sixmonths, end_time],
        showRoller: true
      });

  g3 = new DateGraph(
      document.getElementById('fractiongraph'),
      function() {
      return "date,fraction1,fraction2\n" +
             "20080701,2/18,41/1200\n" +
             "20080702,1/13,43/1200\n" +
             "20080703,2/18,48/1200\n" +
             "20080704,3/21,42/1200\n" +
             "20080705,5/29,57/1200\n" +
             "20080706,0/20,42/1200\n" +
             "20080707,4/14,43/1200\n" +
             "20080708,1/20,37/1200\n" +
             "20080709,1/19,53/1200\n" +
             "20080710,4/22,42/1200\n" +
             "20080711,3/24,57/1200\n" +
             "20080712,8/27,58/1200\n" +
             "20080713,0/14,43/1200\n" +
             "20080714,0/17,39/1200\n" +
             "20080715,2/11,49/1200\n" +
             "20080716,1/17,48/1200\n" +
             "20080717,6/25,43/1200\n" +
             "20080718,2/21,43/1200\n" +
             "20080719,3/24,58/1200\n" +
             "20080720,4/25,50/1200\n" +
             "20080721,1/5,3/166\n";
      },
      null,
      {
        errorBars: true,
        rollPeriod: 7,
        fractions: true,
        showRoller: true
      });
}
</script>

</head>
<body>
<p>Sample graph with multiple series/error bars. Mouse over to see specific
points and change the "7" in the text to adjust the averaging period. Click and
drag to zoom in on a region, or double-click to zoom out.</p>

<div id="graphdiv1" style="width:800px; height:500px;">
</div>

<p>Another chart without error bars:</p>
<table><tr><td>
<div id="graphdiv2" style="width:480px;height:320px;"></div>
</td><td valign=top>
<div id="status2" style="width:200px; font-size:0.8em"></div>
</td>
</tr></table>

<input type=button value="change"
onClick="javascript:g2.updateOptions({
  file: StubbedData,
  errorBars: true,
  labels: null
});" />

<input type=button value="zoom"
onClick="javascript:g2.updateOptions({
dateWindow: [(new Date('10/10/2006')).valueOf(),
             (new Date('10/20/2006')).valueOf()],
});" />

<h3>Fraction graph</h3>
<div id=fractiongraph style="width:480px; height:320px;"></div>

<script defer>
setTimeout("addGraphs();", 100);
</script>

<font size=-1><i><div id="loadingtime">loading time</div></i></font>

</body>
</html>
Commit	Line	Data
	1	<!-- This file serves as a test case for most of the dynamic graphs code -->
	2	<html>
	3	<head>
	4
	5	<!-- The packed versions are fine, I just use these for more meaningful error messages -->
	6	<script type="text/javascript" src="mochikit_v14/MochiKit/MochiKit.js"></script>
	7	<script type="text/javascript" src="plotkit_v091/PlotKit/PlotKit.js"></script>
	8	<script type="text/javascript" src="plotkit_v091/PlotKit/Base.js"></script>
	9	<script type="text/javascript" src="plotkit_v091/PlotKit/Layout.js"></script>
	10	<script type="text/javascript" src="plotkit_v091/PlotKit/Canvas.js"></script>
	11
	12	<script type="text/javascript" src="dygraph-canvas.js"></script>
	13	<script type="text/javascript" src="dygraph.js"></script>
	14
	15	<!--
	16	<script type="text/javascript" src="dygraph-combined.js"></script>
	17	-->
	18	<script type="text/javascript" src="data.js"></script>
	19
	20	<!-- Test page load time -->
	21	<script type="text/javascript">
	22	var start_time = (new Date()).getTime();
	23	setTimeout("testLoadTime();", 0);
	24	function testLoadTime() {
	25	var clock = new Date();
	26	try {
	27	document.getElementById('loadingtime').innerHTML =
	28	"Loading time: " + (clock.getTime() - start_time) + "ms";
	29	} catch(e) {
	30	setTimeout("testLoadTime();", 100);
	31	}
	32	}
	33
	34	function addGraphs() {
	35	g2 = new DateGraph(
	36	document.getElementById("graphdiv2"),
	37	function() {
	38	var r = "date,parabola,line,another line,sine wave\n";
	39	for (var i=1; i<=31; i++) {
	40	r += "" + i;
	41	r += "," + 10(i(31-i));
	42	r += "," + 10(8i);
	43	r += "," + 10(250 - 8i);
	44	r += "," + 10(125 + 125 Math.sin(0.3*i));
	45	r += "\n";
	46	}
	47	return r;
	48	},
	49	null,
	50	{
	51	labelsDiv: document.getElementById('status2'),
	52	labelsSeparateLines: true,
	53	labelsKMB: true,
	54	colors: ["hsl(180,60,50)",
	55	"rgb(255,100,100)",
	56	"#00DD55",
	57	"rgba(50,50,200,0.4)"],
	58	padding: {left: 40, right: 30, top: 5, bottom: 15},
	59	xValueParser: function(x) { return parseFloat(x); },
	60	xValueFormatter: function(x) { return x; },
	61	xTicker: DateGraph.prototype.numericTicks,
	62	showRoller: false
	63	}
	64	);
	65
	66	var end_time = (new Date('11/01/2006')).valueOf();
	67	var sixmonths = 366 / 2 * 24 * 60 * 60 * 1000;
	68
	69	g = new DateGraph(
	70	document.getElementById("graphdiv1"),
	71	StubbedData,
	72	null, // Labels are taken from the series themselves.
	73	{ errorBars: true,
	74	rollPeriod: 7,
	75	minTickSize: 1,
	76	dateWindow: [end_time - sixmonths, end_time],
	77	showRoller: true
	78	});
	79
	80	g3 = new DateGraph(
	81	document.getElementById('fractiongraph'),
	82	function() {
	83	return "date,fraction1,fraction2\n" +
	84	"20080701,2/18,41/1200\n" +
	85	"20080702,1/13,43/1200\n" +
	86	"20080703,2/18,48/1200\n" +
	87	"20080704,3/21,42/1200\n" +
	88	"20080705,5/29,57/1200\n" +
	89	"20080706,0/20,42/1200\n" +
	90	"20080707,4/14,43/1200\n" +
	91	"20080708,1/20,37/1200\n" +
	92	"20080709,1/19,53/1200\n" +
	93	"20080710,4/22,42/1200\n" +
	94	"20080711,3/24,57/1200\n" +
	95	"20080712,8/27,58/1200\n" +
	96	"20080713,0/14,43/1200\n" +
	97	"20080714,0/17,39/1200\n" +
	98	"20080715,2/11,49/1200\n" +
	99	"20080716,1/17,48/1200\n" +
	100	"20080717,6/25,43/1200\n" +
	101	"20080718,2/21,43/1200\n" +
	102	"20080719,3/24,58/1200\n" +
	103	"20080720,4/25,50/1200\n" +
	104	"20080721,1/5,3/166\n";
	105	},
	106	null,
	107	{
	108	errorBars: true,
	109	rollPeriod: 7,
	110	fractions: true,
	111	showRoller: true
	112	});
	113	}
	114	</script>
	115
	116	</head>
	117	<body>
	118	<p>Sample graph with multiple series/error bars. Mouse over to see specific
	119	points and change the "7" in the text to adjust the averaging period. Click and
	120	drag to zoom in on a region, or double-click to zoom out.</p>
	121
	122	<div id="graphdiv1" style="width:800px; height:500px;">
	123	</div>
	124
	125	<p>Another chart without error bars:</p>
	126	<table><tr><td>
	127	<div id="graphdiv2" style="width:480px;height:320px;"></div>
	128	</td><td valign=top>
	129	<div id="status2" style="width:200px; font-size:0.8em"></div>
	130	</td>
	131	</tr></table>
	132
	133	<input type=button value="change"
	134	onClick="javascript:g2.updateOptions({
	135	file: StubbedData,
	136	errorBars: true,
	137	labels: null
	138	});" />
	139
	140	<input type=button value="zoom"
	141	onClick="javascript:g2.updateOptions({
	142	dateWindow: [(new Date('10/10/2006')).valueOf(),
	143	(new Date('10/20/2006')).valueOf()],
	144	});" />
	145
	146	<h3>Fraction graph</h3>
	147	<div id=fractiongraph style="width:480px; height:320px;"></div>
	148
	149	<script defer>
	150	setTimeout("addGraphs();", 100);
	151	</script>
	152
	153	<font size=-1><i><div id="loadingtime">loading time</div></i></font>
	154
	155	</body>
	156	</html>