docs/ie.html

   1 <!--#include virtual="header.html" -->
   2
   3 <h2 id="ie">Internet Explorer Compatibility</h2>
   4
   5 <p>The dygraphs library relies heavily on the HTML5 <code>&lt;canvas&gt;</code> 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:</p>
   6
   7 <pre>
   8 &lt;!DOCTYPE html&gt;
   9 </pre>
  10
  11 <p>When IE9 is in HTML5 mode, dygraphs works just like in other modern browsers.</p>
  12
  13 <p>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 <a href="http://www.nytimes.com/">New York Times</a>, have already dropped support for IE8. Future versions of dygraphs will do the same. But if you insist&hellip;</p>
  14
  15 <p>If you want to support previous versions of Internet Explorer (IE6&ndash;IE8), you'll need to include the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which emulates the <code>&lt;canvas&gt;</code> tag using VML. You can add excanvas by including the following snippet:</p>
  16
  17 <pre>
  18 &lt;!DOCTYPE html&gt;
  19 &lt;html&gt;
  20   &lt;head&gt;
  21     &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"&gt;
  22     &lt;!--[if IE]&gt;&lt;script src="path/to/excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  23   &lt;/head&gt;
  24 </pre>
  25
  26 <p>(This is surprisingly tricky because the HTML5 doctype breaks excanvas in IE8. See <a href="https://groups.google.com/group/dygraphs-users/browse_thread/thread/c60709e04bc7fe5f#">this discussion</a> for details. Note that the &lt;meta http-equiv&hellip;&gt; line must appear <i>first</i> in the &lt;head&gt; section for this to work properly.)</p>
  27
  28 <p>While VML emulation sounds like it would be slow, it works well in practice for most charts.</p>
  29
  30 <p>One common gotcha to look out for: make sure you don't have any trailing commas in parameter lists, e.g.</p>
  31
  32 <pre>
  33 new Dygraph(el, data, {
  34   showRoller: true,  // note trailing comma
  35 })</pre>
  36
  37 <p>Most browsers will ignore the trailing comma, but it will break under IE.</p>
  38
  39 <p>You may also need to delay instantiating any dygraphs until after the DOM
  40 content is ready, as there have been some <a
  41   href="https://groups.google.com/d/topic/dygraphs-users/qPX4Syx2kz8/discussion">reports</a>
  42 that excanvas won't work until this happens. If you're using jQuery, this
  43 means drawing your charts inside of a <code>$(function() { ... })</code>
  44 block.</p>
  45
  46 <!--#include virtual="footer.html" -->