-<!-- 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>
projects / dygraphs.git / commitdiff