dygraphs JavaScript Visualization Library

@@ -86,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

@@ -122,8 +135,8 @@

Plots time series without using an external server or Flash
Works in Internet Explorer (using excanvas)
Lightweight (57kb) and responsive
Displays values on mouseover (this makes it easily discoverable)
Lightweight (69kb) and responsive
Displays values on mouseover, making interaction easily discoverable
Supports error bands around data series
Interactive zoom
Displays Annotations on the chart

Internet Explorer Compatibility

The dygraphs library relies heavily on HTML's <canvas> tag, which Microsoft Internet Explorer does not support. Fortunately, some clever engineers created the excanvas library, which implements the <canvas> tag in IE using VML.

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

You can add IE support to any page using dygraphs by including the following in your page:

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

This works quite well in practice. Charts are responsive, even under VML emulation.

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

Created May 9, 2008 by Dan Vanderkam