@@ -87,8 +99,6 @@

(Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.)

Temperatures in New York vs. San Francisco

@@ -124,7 +136,7 @@

Plots time series without using an external server or Flash

Works in Internet Explorer (using excanvas)

Lightweight (69kb) and responsive

Displays values on mouseover (this makes it easily discoverable)

Displays values on mouseover, making interaction easily discoverable

Supports error bands around data series

Interactive zoom

Displays Annotations on the chart

@@ -361,21 +373,26 @@

The dygraphs library relies heavily on the HTML5 <canvas> tag, which Microsoft Internet Explorer did not traditionally support. To use Microsoft's native canvas implementation in IE9, you need to set an HTML5 doctype on your page:

-      <!DOCTYPE html> 
-

+<!DOCTYPE html>
+

When IE9 is in HTML5 mode, dygraphs works just like in other modern browsers.

If you want to support previous versions of Internet Explorer (IE6–IE8), you'll need to include the excanvas library, which emulates the <canvas> tag using VML. You can add excanvas by including this snippet:

-<head>
-  <!--[if IE]><script src="excanvas.js"></script><![endif]-->
-</head>
+<!DOCTYPE html> 
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> 
+    <!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
+  </head>

While this sounds like it would be slow, it works well in practice for most charts.

(This is surprisingly tricky because the HTML5 doctype breaks excanvas in IE8. See this discussion for details.)

+ +

While VML emulation sounds like it would be slow, it works well in practice for most charts.

One common gotcha to look out for: make sure you don't have any trailing commas in parameter lists, e.g.

@@ -587,9 +604,5 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)

Created May 9, 2008 by Dan Vanderkam