Friday, September 30, 2011

Dygraphs and IE9

(This is a retread of a mailing list post from earlier this year Dan wrote, but it's so interesting I wanted to mildly edit it and repost it here. In fact, this very post was the motivation for finally starting this blog. -Rob)

This is a somewhat lengthy update on the current state-of-the-art when it comes to dygraphs and Internet Explorer. If you just want something to copy and paste to make dygraphs work in all versions of IE, here it is:

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

The dygraphs home page and all tests now use this prologue. Here's the sequence that led to it:
  1. IE9's native <canvas> support is great.
  2. IE9 requires an HTML5 doctype to enable its native <canvas> support.
  3. An HTML5 doctype puts IE8 in standards mode, which breaks excanvas.
  4. excanvas can be fixed, but it requires a hack and doesn't work as well as in quirks mode.
  5. Using a very magical incantation, we can get the right combination of IE document modes.
  6. As a result of these, it might be time to try out FlashCanvas for dygraphs on IE8.
Longer story...On March 14, Microsoft released IE9. The focus of IE9 is on HTML5 support, including a native implementation of the <canvas> tag. This was an exciting development because it meant that, for the first time ever, dygraphs could run natively on the most-recent versions of all the major browsers.

Because many sites rely on quirks in older versions of IE, IE9 will, by default, render all pages in "Quirks mode". This is basically IE5.5 and it most certainly does not feature a native canvas tag.

To tell IE9 that you're quirk-free and would like all the new HTML5 features, you need to preface your page with an HTML5 doctype:

<!DOCTYPE html>

All of the dygraphs documentation and test pages use this doctype.

This doctype is also recognized by previous versions of Internet Explorer and puts them into Standards mode, rather than Quirks mode. Unfortunately, IE8 standards mode changed some of the behavior of VML, which is what excanvas used to emulate the <canvas> tag.

At this point, there are three different directions to go:
  1. Get IE to display in standards mode in IE9 but not in IE8.
  2. Fix excanvas.js to work in IE8 standards mode.
  3. Switch to a different <canvas> emulation system.
Let's look at each of these:

1. Get IE to display in standards mode in IE9 but not in IE8.

This would normally be done via a doctype, however, dygraphs is very much cutting against the grain by wanting IE9 standards mode but specifically wanting to avoid IE8 standards mode. There are a variety of sources of information about how to set the document mode from a web page, for instance:

Many of these resources are either incorrect, incomplete or outdated. I tried many different combinations of doctypes, conditional comments and <meta> tags before arriving at the magical incantation at the start of this email. I'm not entirely sure why it works, but it does seem to. It's fragile — if you reverse the order of the "IE=" clauses, it will break. MS typically goes to great lengths to avoid breaking existing behaviors, so if it works now, I believe that it will continue to work.

Just to be clear
- The <!DOCTYPE html> before the HTML suffices to get the native <canvas> tag in IE9.
- If you want to support IE8, you'll need the <meta> tag and the conditional excanvas include.
- If you only need to support IE7 and earlier, the <meta> tag is optional.

The snippet at the top of this email will always work, so you may as well just include it if you're going to support IE<9. The one quirk is that it will cause IE8 to render your page in IE7 standards mode. This isn't too big a deal, however, as relatively little changed between these two.

2. Fix excanvas.js to work in IE8 standards mode.

Microsoft changed quite a few things about VML in IE8, much to the consternation of VML users:

The update appears to have broken excanvas under some circumstances when used in IE8 standards mode. Dygraphs is one of these circumstances.

Reading around, I noticed this:

As Ronald B. suggests, commenting out one line in excanvas.js un-breaks it in IE8 standards mode:
// = 'hidden';  // fix IE8

However, as the blogger complains, VML in IE8 standards mode doesn't work as well as VML in IE7 standards mode or Quirks mode. You're better off dropping into IE7 mode.

3. Switch to a different <canvas> emulation system.

FlashCanvas ( is a drop-in replacement for excanvas. Instead of relying on VML to work in older versions of IE, it uses Flash. This has a couple of consequences:
- it's faster
- it's less subject to the whims of IE
- flash and the DOM can get out of sync, leading to odd animations when panning.

It's also being actively maintained, unlike excanvas (which hasn't been updated in over a year). My copy of IE8 is a little bit janky, so it's hard for me to tell exactly how well it works. The home page doesn't load for me when using it, for example. That's why I'd appreciate some feedback from the community about the relative merits of excanvas and FlashCanvas.

Thursday, September 22, 2011

Dygraphs has an Annotated Range Selector!

Dygraphs now has an annotated range selector, thanks to an external contribution by Paul Felix. Inspired by Google's Annotated Time Line and other time series chart tools, you can now have easy zooming and panning of the data along the X axis. The widget is displayed at the bottom of the graph when you set the option showRangeSelector to true. Here is a simple example:
  new Dygraph(
    {showRangeSelector: true}
Some other notes:
  • Initially, the entire X range is shown.
  • Zooming is performed by dragging one of the two zoom handles.
  • Once zoomed in, panning is performed by dragging the section between the zoom handles.
  • A mini plot of the data is displayed in the range selector.
  • For multiple series, the mini plot is an average of the series values.
Additional range selector options are described in the Interactive Elements section of the dygraphs options reference.