More style.

[dygraphs.git] / experimental / palette / index.html

diff --git a/experimental/palette/index.html b/experimental/palette/index.html
index 8bed76e..3c15a0a 100644 (file)
--- a/experimental/palette/index.html
+++ b/experimental/palette/index.html
@@ -9,8 +9,9 @@
     <script type="text/javascript" src="../../dygraph-dev.js"></script>
     <script type="text/javascript" src="options.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="palette.css" />
+    <link rel="stylesheet" type="text/css" href="index.css" />
     <style>
     </style>
   </head>
@@ -21,6 +22,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:
@@ -57,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>
@@ -82,9 +87,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>