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             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>