[dygraphs.git] / docs / ie.html

<!--#include virtual="header.html" -->

<h2 id="ie">Internet Explorer Compatibility</h2>

<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>

<pre>
&lt;!DOCTYPE html&gt;
</pre>

<p>When IE9 is in HTML5 mode, dygraphs works just like in other modern browsers.</p>

<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>

<pre>
&lt;!DOCTYPE html&gt; 
&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"&gt; 
    &lt;!--[if IE]&gt;&lt;script src="path/to/excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  &lt;/head&gt;
</pre>

<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>

<p>While VML emulation sounds like it would be slow, it works well in practice for most charts.</p>

<p>One common gotcha to look out for: make sure you don't have any trailing commas in parameter lists, e.g.</p>

<pre>
new Dygraph(el, data, {
  showRoller: true,  // note trailing comma
})</pre>

<p>Most browsers will ignore the trailing comma, but it will break under IE.</p>

<p>You may also need to delay instantiating any dygraphs until after the DOM
content is ready, as there have been some <a
  href="https://groups.google.com/d/topic/dygraphs-users/qPX4Syx2kz8/discussion">reports</a>
that excanvas won't work until this happens. If you're using jQuery, this
means drawing your charts inside of a <code>$(function() { ... })</code>
block.</p>

<!--#include virtual="footer.html" -->
Commit	Line	Data
	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><canvas></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	<!DOCTYPE html>
	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–IE8), you'll need to include the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which emulates the <code><canvas></code> tag using VML. You can add excanvas by including the following snippet:</p>
	14
	15	<pre>
	16	<!DOCTYPE html>
	17	<html>
	18	<head>
	19	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	20	<!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
	21	</head>
	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 <meta http-equiv…> line must appear <i>first</i> in the <head> 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" -->