fix roller positioning; add labels to docs page

[dygraphs.git] / docs / index.html
diff --git a/docs/index.html b/docs/index.html

index 772ab2c..91753e7 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,6 +1,7 @@
  <!DOCTYPE html>
  <html>
    <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
      <title>dygraphs JavaScript Visualization Library</title>
      <!--[if IE]>
        <script type="text/javascript" src="excanvas.js"></script>
@@ -97,7 +98,9 @@
              rollPeriod: 14,
              showRoller: true,
              customBars: true,
-            yAxisLabelWidth: 30
+            yAxisLabelWidth: 30,
+            title: 'Temperatures in New York vs. San Francisco',
+            ylabel: 'Temperature (F)'
            }
          );
        </script>
@@ -358,17 +361,28 @@
  
        <h2 id="ie">Internet Explorer Compatibility</h2>
  
-      <p>The dygraphs library relies heavily on HTML's <code>&lt;canvas&gt;</code> tag, which Microsoft Internet Explorer does not support. Fortunately, some clever engineers created the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which implements the <code>&lt;canvas&gt;</code> tag in IE using VML.</p>
+      <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>
  
-      <p>You can add IE support to any page using dygraphs by including the following in 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;head&gt;
-  &lt;!--[if IE]&gt;&lt;script src="excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
-&lt;/head&gt;
+&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 works quite well in practice. Charts are responsive, even under VML emulation.</p>
+<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.)</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>