Internet Explorer Compatibility
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>
When IE9 is in HTML5 mode, dygraphs works just like in other modern browsers.
You should seriously consider stopping here! Older versions of IE have a small market share that's decreasing by the day. Major web sites, like the New York Times, have already dropped support for IE8. Future versions of dygraphs will do the same. But if you insist…
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:
<!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 is surprisingly tricky because the HTML5 doctype breaks excanvas in IE8. See this discussion for details. Note that the <meta http-equiv…> line must appear first in the <head> section for this to work properly.)
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.
new Dygraph(el, data, {
showRoller: true, // note trailing comma
})
Most browsers will ignore the trailing comma, but it will break under IE.
You may also need to delay instantiating any dygraphs until after the DOM
content is ready, as there have been some reports
that excanvas won't work until this happens. If you're using jQuery, this
means drawing your charts inside of a $(function() { ... })
block.