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>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>
  14
  15 <pre>
  16 &lt;!DOCTYPE html&gt;
  17 &lt;html&gt;
  18   &lt;head&gt;
  19     &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"&gt;
  20     &lt;!--[if IE]&gt;&lt;script src="path/to/excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  21   &lt;/head&gt;
  22 </pre>
  23
  24 <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>
  25
  26 <p>While VML emulation sounds like it would be slow, it works well in practice for most charts.</p>
  27
  28 <p>One common gotcha to look out for: make sure you don't have any trailing commas in parameter lists, e.g.</p>
  29
  30 <pre>
  31 new Dygraph(el, data, {
  32   showRoller: true,  // note trailing comma
  33 })</pre>
  34
  35 <p>Most browsers will ignore the trailing comma, but it will break under IE.</p>
  36
  37 <p>You may also need to delay instantiating any dygraphs until after the DOM
  38 content is ready, as there have been some <a
  39   href="https://groups.google.com/d/topic/dygraphs-users/qPX4Syx2kz8/discussion">reports</a>
  40 that excanvas won't work until this happens. If you're using jQuery, this
  41 means drawing your charts inside of a <code>$(function() { ... })</code>
  42 block.</p>
  43
  44 <!--#include virtual="footer.html" -->