Add support for animated zooms.
[dygraphs.git] / docs / index.html
index ca2c52f..9254c17 100644 (file)
@@ -22,6 +22,8 @@
     </script>
   </head>
   <body>
+    <a href="http://github.com/danvk/dygraphs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub"></a>
+
     <div id="nav">
       <h2>Documentation</h2>
       <ul>
         <li><a href="#gviz">GViz Data</a></li>
         <li><a href="#baseball">Baseball chart</a></li>
         <li><a href="#stock">Stock chart</a></li>
-        <li><a href="#options">Options Reference</a></li>
         <li><a href="#gwt">GWT Compatibility</a></li>
         <li><a href="#policy">Data Policy</a></li>
-      </ul>
-
-      <h2>Features</h2>
-      <ul>
+        <li><a href="options.html">Options Reference</a></li>
+        <li><a href="jsdoc/symbols/Dygraph.html">JSDoc Reference</a></li>
         <li><a href="data.html">Data Formats</a></li>
         <li><a href="annotations.html">Annotations</a></li>
       </ul>
 
       <h2>Project</h2>
       <ul>
+        <li><a href="http://blog.dygraphs.com/">Blog</a></li>
         <li><a href="http://github.com/danvk/dygraphs">Source</a></li>
         <li><a href="http://code.google.com/p/dygraphs/issues/">Issues</a></li>
         <li><a href="http://code.google.com/p/dygraphs/issues/entry">Report Bug</a></li>
@@ -91,7 +91,7 @@
       <h1>dygraphs JavaScript Visualization Library</h1>
 
       <p><a href="http://github.com/danvk/dygraphs">http://github.com/danvk/dygraphs</a></p>
-      <p>See <a href="http://groups.google.com/group/dygraphs-users">mailing list</a>, <a href="http://github.com/danvk/dygraphs/downloads/">downloads</a>, <a href="tests/">gallery</a> and <a href="http://code.google.com/p/dygraphs/issues/">open issues</a></p>
+      <p>See <a href="http://blog.dygraphs.com/">blog</a>, <a href="http://groups.google.com/group/dygraphs-users">mailing list</a>, <a href="http://github.com/danvk/dygraphs/downloads/">downloads</a>, <a href="tests/">gallery</a> and <a href="http://code.google.com/p/dygraphs/issues/">open issues</a></p>
 
       <p>dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.</p>
 
             customBars: true,
             title: 'Daily Temperatures in New York vs. San Francisco',
             ylabel: 'Temperature (F)',
-            titleHeight: 24
+            legend: 'always',
+            labelsDivStyles: { 'textAlign': 'right' }
           }
         );
       </script>
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id=&quot;graphdiv4&quot;
-  style=&quot;width:600px; height:300px;&quot;&gt;&lt;/div&gt;
+  style=&quot;width:480px; height:320px;&quot;&gt;&lt;/div&gt;
 &lt;script type=&quot;text/javascript&quot;&gt;
   g4 = new Dygraph(
     document.getElementById(&quot;graphdiv4&quot;),
         </div>
         <div class="codeoutput" style="float:left;">
           <h3 style="text-align:center">OUTPUT</h3>
-          <div id="graphdiv4" style="width:600px; height:300px;"></div>
+          <div id="graphdiv4" style="width:480px; height:320px;"></div>
           <script type="text/javascript">
             g4 = new Dygraph(
               document.getElementById("graphdiv4"),
@@ -476,7 +477,7 @@ new Dygraph(el, data, {
 
     <p>This chart shows monthly closes of the Dow Jones Industrial Average, both in nominal and real (i.e. adjusted for inflation) dollars. The shaded areas show its monthly high and low. CPI values with a base from 1982-84 are used to adjust for inflation.</p>
 
-    <div id="dow_chart" style="width:900px; height:350px;"></div>
+    <div id="dow_chart" style="width:750px; height:350px;"></div>
     <p><b>Display: </b>
     <input type=checkbox id=0 onClick="stockchange(this)" checked>
     <label for="0"> Nominal</label>
@@ -588,14 +589,15 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
     <p>Call org.danvk.Dygraphs.install() when your application starts to install the JavaScript code into the browser.  You can use <a href="http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html">JSNI</a> to call Dygraphs from your GWT code, as in the example below.  The example uses the <a href="http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted">Visualization API for GWT</a> and the <a href="#gviz">Dygraphs GViz API.</a></p>
 
 <pre>
-  public static native JavaScriptObject drawDygraph(Element element, DataTable dataTable, double minY, double maxY) /*-{
-    var chart = new $wnd.Dygraph.GVizChart(element);
-    chart.draw(dataTable,
-      {
-        valueRange: [minY, maxY]
-      });
-    return chart;
-  }-*/;
+public static native JavaScriptObject drawDygraph(
+    Element element, DataTable dataTable, double minY, double maxY) /*-{
+  var chart = new $wnd.Dygraph.GVizChart(element);
+  chart.draw(dataTable,
+    {
+      valueRange: [minY, maxY]
+    });
+  return chart;
+}-*/;
 </pre>
 
     <h2 id="policy">Data Policy</h2>