(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.)
-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:
You can add IE support to any page using dygraphs by including the following in your page:
++<!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 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.
@@ -368,7 +405,15 @@ new Dygraph(el, data, {The Google Visualization API provides a standard interface for describing data. Once you've specified your data using this API, you can plug in any GViz-compatible visualization. dygraphs is such a visualization.
+The Google + Visualization API provides a standard interface for describing data. + Once you've specified your data using this API, you can plug in any + GViz-compatible visualization. dygraphs is such a visualization. In + particular, it can be used as a drop-in replacement for the + AnnotatedTimeline visualization used on Google Finance and other sites. To + see how this works, check out the gviz + annotation demo.
For a simple demonstration of how to use dygraphs a GViz visualization, see http://danvk.org/dygraphs/tests/gviz.html. dygraphs can also be used as a GViz gadget. This allows it to be embedded inside of a Google Spreadsheet. For a demonstration of this, see this spreadsheet. The URL for the gadget is http://danvk.org/dygraphs/gadget.xml.