Move textarea to common area.

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

index e2f76d3..e5f1754 100644 (file)
--- a/experimental/palette/index.html
+++ b/experimental/palette/index.html
@@ -8,12 +8,12 @@
      <![endif]-->
      <script type="text/javascript" src="../../dygraph-dev.js"></script>
      <script type="text/javascript" src="options.js"></script>
+    <script type="text/javascript" src="../../common/textarea.js"></script>
+    <script type="text/javascript" src="tooltip.js"></script>
      <script type="text/javascript" src="palette.js"></script>
      <script type="text/javascript" src="samples.js"></script>
      <script type="text/javascript" src="index.js"></script>
      <link rel="stylesheet" type="text/css" href="index.css" />
-    <style>
-    </style>
    </head>
    <body>
      <h2>Palette</h2>
@@ -45,9 +45,9 @@
                <li>You will see that the prototype function body is
                <code>function(e, x, points){ }</code>. Paste in this
                replacement function:<p/>
-              <code>function(e, x){ var elem =
-                document.getElementById("messages"); elem.innerHTML =
-                elem.innerHTML + x + "&lt;br&gt;"; }</code></li>
+              <code>function(e, x){<br/>&nbsp;&nbsp;var elem =
+                document.getElementById("messages");<br/>&nbsp;&nbsp;elem.innerHTML =
+                elem.innerHTML + x + "&lt;br&gt;";<br/>}</code></li>
                <li>Click the <em>OK</em> button. The <em>clickCallback</em>
                button now says <code>defined</code> instead of <code>not defined</code>.</li>
                <li>Click anywhere on the graph. The x-value will appear on the
@@ -61,6 +61,7 @@
              The palette on the right contains (most) Dygraphs options. Here's
              how they work:
              <ul>
+              <li>The selection box on top can be used to choose your own data source.</li>
                <li>Use the filter box to constrain your selection. For instance,
                typing <code>draw</code> will show all options with that phrase in
                its name.</li>
@@ -86,7 +87,7 @@
              You get the idea.
            </div>
          </td>
-        <td valign="top"><div class="palette" id="optionsPalette"></div></td>
+        <td valign="top"><div id="optionsPalette"></div></td>
       </tr>
      </table>
    </body>