docs/index.html

   1 <html>
   2   <head>
   3     <title>dygraphs JavaScript Library</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="dygraph-combined.js"></script>
   8     <style type="text/css">
   9       .thinborder {
  10         border-width: 1px;
  11         border-spacing: 0px;
  12         border-style: solid;
  13         border-color: black;
  14         border-collapse: collapse;
  15       }
  16       .thinborder td, .thinborder th {
  17         border-width: 1px;
  18         padding: 5px;
  19         border-style: solid;
  20         border-color: black;
  21       }
  22     </style>
  23   </head>
  24 <body>
  25   <center>
  26     <p><span style="font-size:28pt;">dygraphs JavaScript Library</span><br/>
  27     <a href="http://code.google.com/p/dygraphs/">code.google.com/p/dygraphs</a></p>
  28   </center>
  29
  30 <p>The dygraphs JavaScript library produces produces interactive, zoomable charts of time series.</p>
  31
  32 <h3>Features</h3>
  33 <ul>
  34   <li>Plots time series without using an external server or Flash</li>
  35   <li>Supports multiple data series</li>
  36   <li>Supports error bands around data series</li>
  37   <li>Displays values on mouseover</li>
  38   <li>Interactive zoom</li>
  39   <li>Adjustable averaging period</li>
  40   <li>Customizable click-through actions</li>
  41   <li>Compatible with the Google Visualization API</li>
  42 </ul>
  43
  44 <h3>Caveats</h3>
  45 <ul>
  46   <li>Requires Firefox 1.5+ or Safari/WebKit 1.3+.</li>
  47   <li>Internet Explorer is poorly supported.</li>
  48 </ul>
  49
  50 <h2>Demo</h2>
  51 <font size=-1>(Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom out.)</font><br/>
  52 <table><tr><td>
  53 <div id="demodiv" style="width:480px; height:320px;"></div>
  54 </td><td valign=top>
  55 <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
  56 </td>
  57 </tr></table>
  58 <script type="text/javascript">
  59   g = new DateGraph(
  60           document.getElementById("demodiv"),
  61           function() {
  62             var zp = function(x) { if (x < 10) return "0"+x; else return x; };
  63             var r = "date,parabola,line,another line,sine wave\n";
  64             for (var i=1; i<=31; i++) {
  65             r += "200610" + zp(i);
  66             r += "," + 10*(i*(31-i));
  67             r += "," + 10*(8*i);
  68             r += "," + 10*(250 - 8*i);
  69             r += "," + 10*(125 + 125 * Math.sin(0.3*i));
  70             r += "\n";
  71             }
  72             return r;
  73           },
  74           null,
  75           {
  76             rollPeriod: 1,
  77             labelsDiv: document.getElementById('status'),
  78             labelsSeparateLines: true,
  79             labelsKMB: true,
  80             colors: ["hsl(180,60,50)",
  81                      "rgb(255,100,100)",
  82                      "#00DD55",
  83                      "rgba(50,50,200,0.4)"],
  84             padding: {left: 40, right: 30, top: 15, bottom: 15},
  85           }
  86       );
  87 </script>
  88
  89 <p>For more demos, browse the dygraph <a href="tests/">tests</a> directory.</p>
  90
  91 <h2>Usage</h2>
  92
  93 <p>The dygraphs library depends on two other JS libraries: <a href="http://www.mochikit.com/">MochiKit</a> and <a href="http://www.liquidx.net/plotkit/">PlotKit</a>. Rather than tracking down copies of these libraries, I recommend using a packed version of dygraphs that combines all three libraries into a single JS file. Either grab this file from dygraph project's <a href="http://code.google.com/p/dygraphs/downloads/list">downloads</a> page or create it yourself by <a href="http://code.google.com/p/dygraphs/source/checkout">checking out</a> a copy of the code and running:
  94
  95 <pre>./generate-combined.sh</pre>
  96
  97 <p>The combined JS file is now in <code>dygraph-combined.js</code>. Here's a basic example to get things started:</p>
  98
  99 <table>
 100   <tr><th>HTML</th>
 101       <td rowspan=2><img src=arrow.gif /></td>
 102       <th>Output</th></tr>
 103 <tr>
 104 <td valign=top><pre>
 105 &lt;html&gt;
 106 &lt;head&gt;
 107 &lt;script type="text/javascript"
 108   src="combined.js"&gt;&lt;/script&gt;
 109 &lt;/head&gt;
 110 &lt;body&gt;
 111 &lt;div id="graphdiv"&gt;&lt;/div&gt;
 112 &lt;script type="text/javascript"&gt;
 113   g = new Dygraph(
 114         // containing div
 115         document.getElementById("graphdiv"),
 116         // CSV or path to a CSV file.
 117         "Date,Temperature\n" +
 118         "20080507,75\n" +
 119         "20080508,70\n" +
 120         "20080509,80\n",
 121       );
 122 &lt;/script&gt;
 123 &lt;/body&gt;
 124 &lt;/html&gt;
 125 </pre>
 126 </td><td valign=top>
 127   <div id="graphdiv"></div>
 128   <script type="text/javascript">
 129     g = new Dygraph(
 130         document.getElementById("graphdiv"),  // containing div
 131         "Date,Temperature\n" +                // CSV or path to a CSV file.
 132         "20080507,75\n" +
 133         "20080508,70\n" +
 134         "20080509,80\n"
 135       );
 136   </script>
 137 </td></tr></table>
 138
 139 <p>In order to keep this example self-contained, the second parameter is a function that returns CSV data. These lines <i>must</i> begin with a date in the form <i>YYYYMMDD</i>. In most applications, it makes more sense to include a CSV file instead. If the second parameter to the constructor is a string, it will be interpreted as the path to a CSV file. The Dygraph will perform an XMLHttpRequest to retrieve this file and display the data when it becomes available. Make sure your CSV file is readable and serving from a place that understands XMLHttpRequest's! In particular, you cannot specify a CSV file using <code>"file:///"</code>. Here's an example: (data from <a href="http://www.wunderground.com/history/airport/KNUQ/2007/1/1/CustomHistory.html?dayend=31&monthend=12&yearend=2007&req_city=NA&req_state=NA&req_statename=NA">Weather Underground</a>)</p>
 140
 141 <table>
 142   <tr><th>HTML</th>
 143       <td rowspan=2><img src=arrow.gif /></td>
 144       <th>Output</th></tr>
 145 <tr>
 146 <td valign=top><pre>
 147 &lt;html&gt;
 148 &lt;head&gt;
 149 &lt;script type="text/javascript"
 150   src="combined.js"&gt;&lt;/script&gt;
 151 &lt;/head&gt;
 152 &lt;body&gt;
 153 &lt;div id="graphdiv"
 154   style="width:500px; height:300px;"&gt;&lt;/div&gt;
 155 &lt;script type="text/javascript"&gt;
 156   g = new Dygraph(
 157         document.getElementById("graphdiv"),
 158         "temperatures.csv",  // path to CSV file
 159         {}                   // options
 160       );
 161 &lt;/script&gt;
 162 &lt;/body&gt;
 163 &lt;/html&gt;
 164 </pre>
 165 </td><td valign=top>
 166   <div id="graphdiv2" style="width:500px; height:300px;"></div>
 167   <script type="text/javascript">
 168     g2 = new Dygraph(
 169           document.getElementById("graphdiv2"),
 170           "temperatures.csv", {}
 171         );
 172   </script>
 173 </td></tr></table>
 174
 175 <p>Click <a href="temperatures.csv">here</a> to view the <code>temperatures.csv</code> file. There are a few things to note here:</p>
 176
 177 <ul>
 178   <li>The Dygraph sent off an XHR to get the temperatures.csv file.</li>
 179   <li>The labels were taken from the first line of <code>temperatures.csv</code>, which is <code>Date,High,Low</code>.</li>
 180   <li>The Dygraph automatically chose two different, easily-distinguishable colors for the two data series.</li>
 181   <li>The labels on the x-axis have switched from days to months. If you zoom in, they'll switch to weeks and then days.</li>
 182   <li>Some heuristics are used to determine a good vertical range for the data. The idea is to make all the data visible and have human-friendly values on the axis (i.e. 200 instead of 193.4). Generally this works well.</li>
 183   <li>The data is very spiky. A moving average would be easier to interpret.</li>
 184 </ul>
 185
 186 <p>This problem can be fixed by specifying the appropriate options in the "additional options" parameter to the Dygraph constructor. To set the number of days for a moving average, use the <b>rollPeriod</b> option. Here's how it's done:</p>
 187
 188 <table>
 189   <tr><th>HTML</th>
 190       <td rowspan=2><img src=arrow.gif /></td>
 191       <th>Output</th></tr>
 192 <tr>
 193 <td valign=top><pre>
 194 &lt;html&gt;
 195 &lt;head&gt;
 196 &lt;script type="text/javascript"
 197   src="combined.js"&gt;&lt;/script&gt;
 198 &lt;/head&gt;
 199 &lt;body&gt;
 200 &lt;div id="graphdiv"
 201   style="width:500px; height:300px;"&gt;&lt;/div&gt;
 202 &lt;script type="text/javascript"&gt;
 203   g = new Dygraph(
 204         document.getElementById("graphdiv"),
 205         "temperatures.csv",
 206         { rollPeriod: 7,
 207           showRoller: true,
 208         }
 209       );
 210 &lt;/script&gt;
 211 &lt;/body&gt;
 212 &lt;/html&gt;
 213 </pre>
 214 </td><td valign=top>
 215   <div id="graphdiv3" style="width:500px; height:300px;"></div>
 216   <script type="text/javascript">
 217     g3 = new Dygraph(
 218           document.getElementById("graphdiv3"),
 219           "temperatures.csv",
 220           { rollPeriod: 7,
 221             showRoller: true,
 222           }
 223         );
 224   </script>
 225 </td></tr></table>
 226
 227 <p>A rolling average can be set using the text box in the lower left-hand corner of the graph (the showRoller attribute is what makes this appear).</p>
 228
 229 <h2>Error Bars</h2>
 230 <p>Another significant feature of the dygraphs library is the ability to display error bars around data series. One standard deviation must be specified for each data point. A +/-<i>n</i> sigma band will be drawn around the data series at that point. If a moving average is being displayed, dygraphs will compute the standard deviation of the average at each point. (i.e. <i>&sigma;</i> = sqrt((<i>&sigma;_1</i>^2 + <i>&sigma;_2</i>^2 + ... + <i>&sigma;_n</i>^2)/<i>n</i>))</p>
 231
 232 <p>Here's a demonstration. There are two data series. One is <code>N(100,10)</code> with a standard deviation of 10 specified at each point. The other is <code>N(80,20)</code> with a standard deviation of 20 specified at each point. The CSV file was generated using Octave and can be viewed <a href="twonormals.csv">here</a>.</p>
 233
 234 <table>
 235   <tr><th>HTML</th>
 236       <td rowspan=2><img src=arrow.gif /></td>
 237       <th>Output</th></tr>
 238 <tr>
 239 <td valign=top><pre>
 240 &lt;html&gt;
 241 &lt;head&gt;
 242 &lt;script type="text/javascript"
 243   src="combined.js"&gt;&lt;/script&gt;
 244 &lt;/head&gt;
 245 &lt;body&gt;
 246 &lt;div id="graphdiv"
 247  style="width:600px; height:300px;"
 248  &gt;&lt;/div&gt;
 249 &lt;script type="text/javascript"&gt;
 250 $ = document.getElementById;
 251 g = new Dygraph(
 252   $("graphdiv"),
 253   "twonormals.csv",
 254   { rollPeriod: 7,
 255     showRoller: true,
 256     errorBars: true,
 257     valueRange: [50,125]
 258   }
 259 );
 260 &lt;/script&gt;
 261 &lt;/body&gt;
 262 &lt;/html&gt;
 263 </pre>
 264 </td><td valign=top>
 265   <div id="graphdiv4" style="width:600px; height:300px;"></div>
 266   <script type="text/javascript">
 267 $ = document.getElementById;
 268 new Dygraph(
 269   document.getElementById("graphdiv4"),
 270   "twonormals.csv",
 271   { rollPeriod: 14,
 272     showRoller: true,
 273     errorBars: true,
 274     valueRange: [50, 125]
 275   }
 276 );
 277   </script>
 278 </td></tr></table>
 279
 280 <p>Things to note here:</p>
 281 <ul>
 282   <li>The <b>errorBars</b> option affects both the interpretation of the CSV file and the display of the graph. When <b>errorBars</b> is set to true, each line is interpreted as <i>YYYYMMDD</i>,<i>A</i>,<i>sigma_A</i>,<i>B</i>,<i>sigma_B</i>,...</li>
 283   <li>The first line of the CSV file doesn't mention the error columns. In this case, it's just "Date,Series1,Series2".</li>
 284   <li>The averaging visibly affects the error bars. This is most clear if you crank up the rolling period to something like 100 days. For the earliest dates, there won't be 100 data points to average so the signal will be noisier. The error bars get smaller like sqrt(N) going forward in time until there's a full 100 points to average.</li>
 285   <li>The error bars are partially transparent. This can be seen when they overlap one another.</li>
 286 </ul>
 287
 288 <h2>One last demo</h2>
 289
 290 <p>This chart shows monthly closes of the Dow Jones Industrial Average, both in nominal and real (i.e. adjusted for inflation) dollars. The shaded areas show its monthly high and low. CPI values with a base from 1982-84 are used to adjust for inflation.</p>
 291
 292 <div id=dow_chart style="width:900px; height:350px;"></div>
 293 <script type="text/javascript">
 294   // From http://www.econstats.com/eqty/eq_d_mi_3.csv
 295   dow = new Dygraph(
 296     document.getElementById('dow_chart'),
 297     "dow.txt",
 298     {
 299       showRoller: true,
 300       customBars: true,
 301       labelsKMB: true,
 302       padding: {left:30, right:30, top:5, bottom:5}
 303     });
 304 </script>
 305 <!--
 306
 307 Here is a script to regenerate the Dow Jones plot:
 308
 309 # Get unadjusted DJIA data in a nice format:
 310 curl -O http://www.econstats.com/eqty/eq_d_mi_3.csv
 311 sed '1,17d' eq_d_mi_3.csv | cut -d, -f1,6 | perl -pe 's/(\d{4}-\d\d)-\d\d/$1/g' | perl -pe 's/, */\t/' | grep -v 'na' | perl -ne 'chomp; ($m,$v) = split/\t/; $close{$m} = $v; if ($low{$m} == 0 || $v < $low{$m}) { $low{$m}=$v } if ($v > $high{$m}) { $high{$m} = $v } END { for $x(sort keys %close) { print "$x\t$low{$x}\t$close{$x}\t$high{$x}\n" } } ' > monthly-djia.tsv
 312
 313 # Fetch and format the CPI data:
 314 curl 'http://data.bls.gov/PDQ/servlet/SurveyOutputServlet?series_id=CUUR0000SA0&years_option=all_years&periods_option=all_periods&output_type=column&output_format=text&delimiter=comma' > cpi-u.txt
 315 sed '1,/Series Id,Year,/d' cpi-u.txt | sed '/^$/,$d' | cut -d, -f2,3,4 | perl -ne 'print if /,M(0[0-9]|1[012]),/' | perl -pe 's/(\d{4}),M(\d{2}),/$1-$2\t/g' > cpi-u.tsv
 316
 317 # Merge:
 318 join -t'       ' cpi-u.tsv monthly-djia.tsv > annotated-djia.tsv
 319 perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high) = split /\t/; $cpi /= 100.0; print "$m-15,$low;$close;$high,",($low/$cpi),";",($close/$cpi),";",($high/$cpi),"\n"' annotated-djia.tsv > dow.txt
 320
 321 -->
 322
 323
 324 <h2>Other Options</h2>
 325 <p>These are the options that can be passed in through the optional third parameter of the Dygraph constructor. To see demonstrations of many of these options, browse the <a href="tests/">dygraphs tests</a> directory.</p>
 326
 327 <table class=thinborder width=900>
 328   <tr><th>Name</th><th>Sample Value</th><th>Description</th></tr>
 329   <tr>
 330     <td><b>includeZero</b></td>
 331     <td><code>true, false</code></td>
 332     <td>Usually, dygraphs will use the range of the data plus some padding to
 333     set the range of the y-axis. If this option is set, the y-axis will always
 334     include zero, typically as the lowest value. This can be used to avoid
 335     exaggerating the variance in the data.</td>
 336   </tr>
 337
 338   <tr>
 339     <td><b>rollPeriod</b></td>
 340     <td><code>7</code></td>
 341     <td>Number of days over which to average data. Discussed extensively above.</td>
 342   </tr>
 343
 344   <tr>
 345     <td><b>showRoller</b></td>
 346     <td><code>true</code></td>
 347     <td>Should the rolling average period text box be shown? Default is false.</td>
 348   </tr>
 349
 350   <tr>
 351     <td><b>colors</b></td>
 352     <td><code>['red',&nbsp;'#00FF00']</code></td>
 353     <td>List of colors for the data series. These can be of the form "#AABBCC"
 354       or "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced
 355       points around a color wheel are used.</td>
 356   </tr>
 357
 358   <tr>
 359     <td><b>colorSaturation</b></td>
 360     <td><code>1.0</code></td>
 361     <td>If <b>colors</b> is not specified, saturation of the
 362       automatically-generated data series colors. (0.0-1.0, default:
 363       1.0)</td>
 364   </tr>
 365
 366   <tr>
 367     <td><b>colorValue</b></td>
 368     <td><code>0.5</code></td>
 369     <td>If colors is not specified, value of the data series colors, as in
 370       hue/saturation/value. (0.0-1.0, default 0.5)</td>
 371   </tr>
 372
 373   <tr>
 374     <td><b>clickCallback</b></td>
 375     <td><code>function(e,date){ alert(date); }</code></td>
 376     <td>A function to call when a data point is clicked. The function should take
 377       two arguments, the event object for the click and the date that was
 378       clicked. (default null)</td>
 379   </tr>
 380
 381   <tr>
 382     <td><b>zoomCallback</b></td>
 383     <td><code>function(minDate,maxDate) {}</code></td>
 384     <td>A function to call when the zoom window is changed (either by zooming
 385     in or out). minDate and maxDate are millis since epoch.</td>
 386   </tr>
 387
 388   <tr>
 389     <td><b>strokeWidth</b></td>
 390     <td><code>2.0</code></td>
 391     <td>Width of the data lines. This can be used to increase the contrast or
 392       some graphs. (default 1.0)</td>
 393   </tr>
 394
 395   <tr>
 396     <td><b>dateWindow</b></td>
 397     <td><code>[Date.parse('2006-01-01'),<br/>
 398         (new&nbsp;Date()).valueOf()]</code></td>
 399     <td>Initially zoom in on a section of the graph. Is of the form [earliest,
 400       latest], where earliest/latest are millis since epoch.  By default, the
 401       full range of the input is shown.</td>
 402   </tr>
 403
 404   <tr>
 405     <td><b>valueRange</b></td>
 406     <td><code>[10, 110]</code></td>
 407     <td>Explicitly set the vertical range of the graph to [low, high]. By
 408       default, some clever heuristics are used (see above).</td>
 409   </tr>
 410
 411   <tr>
 412     <td><b>labelsSeparateLines</b></td>
 413     <td><code>true</code></td>
 414     <td>Put &lt;br/&gt; between lines in the label string. Often used in
 415       conjunction with <b>labelsDiv</b>. (default false)</td>
 416   </tr>
 417
 418   <tr>
 419     <td><b>labelsDiv</b></td>
 420     <td><code>document.getElementById('foo')</code></td>
 421     <td>Show data labels in an external div, rather than on the graph. (default
 422       null)</td>
 423   </tr>
 424
 425   <tr>
 426     <td><b>labelsKMB</b></td>
 427     <td><code>true</code></td>
 428     <td>Show K/M/B for thousands/millions/billions on y-axis (default
 429       false).</td>
 430   </tr>
 431
 432   <tr>
 433     <td><b>labelsDivWidth</b></td>
 434     <td>250</td>
 435     <td>Width (in pixels) of the div which shows information on the
 436     currently-highlighted points.</td>
 437   </tr>
 438
 439   <tr>
 440     <td><b>labelsDivStyles</b></td>
 441     <td>{}</td>
 442     <td>Additional styles to apply to the currently-highlighted points div. For
 443     example, { 'font-weigth': 'bold' } will make the labels bold.</td>
 444   </tr>
 445
 446   <tr>
 447     <td><b>highlightCircleSize</b></td>
 448     <td><code>3</code></td>
 449     <td>Size (in pixels) of the dot drawn over highlighted points (default 3).</td>
 450   </tr>
 451
 452   <tr>
 453     <td><b>drawPoints</b></td>
 454     <td><code>false</code></td>
 455     <td>Draw a small dot at each point, in addition to a line going through
 456     the point. This makes the individual data points easier to see, but can
 457     increase visual clutter in the chart. Default: false</td>
 458   </tr>
 459
 460   <tr>
 461     <td><b>pointSize</b></td>
 462     <td><code>1.0</code></td>
 463     <td>The size of the dot to draw on each point in pixels (see
 464     drawPoints). A dot is always drawn when a point is "isolated", i.e.
 465     there is a missing point on either side of it. This also controls the
 466     size of those dots.</td>
 467   </tr>
 468
 469   <tr>
 470     <td><b>pixelsPerXLabel</b>, <b>pixelsPerYLabel</b></td>
 471     <td>50</td>
 472     <td>Number of pixels to require between each x- and y-label. Larger values
 473     will yield a sparser axis with fewer ticks. Defaults: 60 (x-axis), 30
 474     (y-axis).</td>
 475   </tr>
 476
 477   <tr>
 478     <td><b>xAxisLabelWidth</b>, <b>yAxisLabelWidth</b></td>
 479     <td>50</td>
 480     <td>Width (in pixels) of the x- and y-axis labels.</td>
 481   </tr>
 482
 483   <tr>
 484     <td><b>axisLabelFontSize</b></td>
 485     <td>14</td>
 486     <td>Size of the font (in pixels) to use in the axis labels, both x- and
 487     y-axis.</td>
 488   </tr>
 489
 490   <tr>
 491     <td><b>rightGap</b></td>
 492     <td>5</td>
 493     <td>Number of pixels to leave blank at the right edge of the Dygraph. This
 494     makes it easier to highlight the right-most data point.</td>
 495   </tr>
 496
 497   <tr>
 498     <td><b>errorBars</b></td>
 499     <td><code>false</code></td>
 500     <td>Does the data contain standard deviations? Setting this to true alters
 501       the input format (see above). (default false)</td>
 502   </tr>
 503
 504   <tr>
 505     <td><b>sigma</b></td>
 506     <td>2</td>
 507     <td>When errorBars is set, shade this many standard deviations above/below
 508     each point.</td>
 509   </tr>
 510
 511   <tr>
 512     <td><b>fractions</b></td>
 513     <td>false</td>
 514     <td>When set, attempt to parse each cell in the CSV file as "a/b", where a
 515     and b are integers. The ratio will be plotted. This allows computation of
 516     Wilson confidence intervals (see below).</td>
 517   </tr>
 518
 519   <tr>
 520     <td><b>wilsonInterval</b></td>
 521     <td>true</td>
 522     <td>Use in conjunction with the "fractions" option. Instead of plotting +/-
 523     N standard deviations, dygraphs will compute a Wilson confidence interval
 524     and plot that. This has more reasonable behavior for ratios close to 0 or
 525     1.</td>
 526   </tr>
 527
 528   <tr>
 529     <td><b>customBars</b></td>
 530     <td>false</td>
 531     <td>When set, parse each CSV cell as "low;middle;high". Error bars will be
 532     drawn for each point between low and high, with the series itself going
 533     through middle.</td>
 534   </tr>
 535 </table>
 536
 537 <p>Any options you specify also get passed on to PlotKit's <a href="http://media.liquidx.net/js/plotkit-doc/PlotKit.Renderer.html">Renderer</a> class. dygraphs will override some of these (e.g. strokeColor), but others may be useful. The <code>padding</code> property is an example of this.</p>
 538
 539 <h2>Common Gotchas</h2>
 540 <p>Here are a few problems that I've frequently run into while using the
 541 dygraphs library.</p>
 542
 543 <ul>
 544   <li>Make sure your CSV files are readable! If your graph isn't showing up,
 545   the XMLHttpRequest for the CSV file may be failing. You can determine whether
 546   this is the case using tools like <a
 547     href="http://www.getfirebug.com/">Firebug</a>.</li>
 548
 549   <li>Make sure your CSV files are in the correct format. They must be of the
 550   form <code>YYYYMMDD,series1,series2,...</code>. And if you set the
 551   <code>errorBars</code> property, make sure you alternate data series and
 552   standard deviations.</li>
 553
 554   <li>dygraphs are not happy when placed inside a <code>&lt;center&gt;</code>
 555   tag. This applies to the CSS <code>text-align</code> property as well. If you
 556   want to center a Dygraph, put it inside a table with "align=center"
 557   set.</li>
 558
 559   <li>Don't set the <code>dateWindow</code> property to a date. It expects
 560   milliseconds since epoch, which can be obtained from a JavaScript Date
 561   object's valueOf method.</li>
 562 </ul>
 563
 564 <h2>Data Policy</h2>
 565 <p>dygraphs is purely client-side JavaScript. It does not send your data to any
 566 servers -- the data is processed entirely in the client's browser.</p>
 567
 568 <p><font size=-1>Created May 9, 2008 by <a href=mailto:danvdk@gmail.com>Dan Vanderkam</a></font></p>
 569
 570 <!-- Google Analytics -->
 571 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
 572 </script>
 573 <script type="text/javascript">
 574 _uacct = "UA-769809-1";
 575 urchinTracker();
 576 </script>
 577
 578 </body>
 579 </html>