Add per-axis specification in Dygraphs. Adding jquery as part of introducing multi...

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

index 8bed76e..a463223 100644 (file)
--- a/experimental/palette/index.html
+++ b/experimental/palette/index.html
@@ -6,13 +6,16 @@
      <!--[if IE]>
      <script type="text/javascript" src="../../excanvas.js"></script>
      <![endif]-->
+    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
      <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="multi-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="palette.css" />
-    <style>
-    </style>
+    <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    <body>
      <h2>Palette</h2>
@@ -21,6 +24,9 @@
      <table>
        <tr>
          <td valign="top">
+          <div id="selector">
+            <select></select>
+          </div>
            <div id="graph"></div>
            <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
            Other messages:
@@ -41,9 +47,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
@@ -57,6 +63,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>
@@ -82,9 +89,9 @@
              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>
-  <script type="text/javascript">start();</script>
+  <script type="text/javascript">Index.start();</script>
  </html>