test.html

   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*(8*i);
  43             r += "," + 10*(250 - 8*i);
  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           }
  63       );
  64
  65   var end_time = (new Date('11/01/2006')).valueOf();
  66   var sixmonths = 366 / 2 * 24 * 60 * 60 * 1000;
  67
  68   g = new DateGraph(
  69       document.getElementById("graphdiv1"),
  70       StubbedData,
  71       null,  // Labels are taken from the series themselves.
  72       { errorBars: true,
  73         rollPeriod: 7,
  74         minTickSize: 1,
  75         dateWindow: [end_time - sixmonths, end_time]});
  76
  77   g3 = new DateGraph(
  78       document.getElementById('fractiongraph'),
  79       function() {
  80       return "date,fraction1,fraction2\n" +
  81              "20080701,2/18,41/1200\n" +
  82              "20080702,1/13,43/1200\n" +
  83              "20080703,2/18,48/1200\n" +
  84              "20080704,3/21,42/1200\n" +
  85              "20080705,5/29,57/1200\n" +
  86              "20080706,0/20,42/1200\n" +
  87              "20080707,4/14,43/1200\n" +
  88              "20080708,1/20,37/1200\n" +
  89              "20080709,1/19,53/1200\n" +
  90              "20080710,4/22,42/1200\n" +
  91              "20080711,3/24,57/1200\n" +
  92              "20080712,8/27,58/1200\n" +
  93              "20080713,0/14,43/1200\n" +
  94              "20080714,0/17,39/1200\n" +
  95              "20080715,2/11,49/1200\n" +
  96              "20080716,1/17,48/1200\n" +
  97              "20080717,6/25,43/1200\n" +
  98              "20080718,2/21,43/1200\n" +
  99              "20080719,3/24,58/1200\n" +
 100              "20080720,4/25,50/1200\n" +
 101              "20080721,1/5,3/166\n";
 102       },
 103       null,
 104       {
 105         errorBars: true,
 106         rollPeriod: 7,
 107         fractions: true,
 108       });
 109 }
 110 </script>
 111
 112 </head>
 113 <body>
 114 <p>Sample graph with multiple series/error bars. Mouse over to see specific
 115 points and change the "7" in the text to adjust the averaging period. Click and
 116 drag to zoom in on a region, or double-click to zoom out.</p>
 117
 118 <div id="graphdiv1" style="width:800px; height:500px;">
 119 </div>
 120
 121 <p>Another chart without error bars:</p>
 122 <table><tr><td>
 123 <div id="graphdiv2" style="width:480px;height:320px;"></div>
 124 </td><td valign=top>
 125 <div id="status2" style="width:200px; font-size:0.8em"></div>
 126 </td>
 127 </tr></table>
 128
 129 <input type=button value="change"
 130 onClick="javascript:g2.updateOptions({
 131   file: StubbedData,
 132   errorBars: true,
 133   labels: null
 134 });" />
 135
 136 <input type=button value="zoom"
 137 onClick="javascript:g2.updateOptions({
 138 dateWindow: [(new Date('10/10/2006')).valueOf(),
 139              (new Date('10/20/2006')).valueOf()],
 140 });" />
 141
 142 <h3>Fraction graph</h3>
 143 <div id=fractiongraph style="width:480px; height:320px;"></div>
 144
 145 <script defer>
 146 setTimeout("addGraphs();", 100);
 147 </script>
 148
 149 <font size=-1><i><div id="loadingtime">loading time</div></i></font>
 150
 151 </body>
 152 </html>