Gave proper instructions and fixed prototype function bug.

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

diff --git a/experimental/palette/index.html b/experimental/palette/index.html
index 610d352..8bed76e 100644 (file)
--- a/experimental/palette/index.html
+++ b/experimental/palette/index.html
@@ -25,6 +25,62 @@
           <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
           Other messages:
           <div id="messages"></div>
+          <div id="moreinstructions">
+            <h3>Learn By Doing</h3>
+            <ol>
+              <li>In the filter box, type <code>point</code>.</li>
+              <li>In the <em>drawPoints</em> text box, enter <code>true</code></li>
+              <li>Press <code>enter</code> or click <em>Refresh</em>. You will
+              see dots on the graph where points exist.</li>
+              <li>In the <em>pointSize</em> text box, enter <code>5</code></li>
+              <li>Press <code>enter</code> or click <em>Refresh</em>. The dots
+              just got larger.</li>
+              <li>Type <code>callback</code> in the filter box.</li>
+              <li>Instead of a text box, you will see buttons that can be used
+              to define callbacks. Click the button for <em>clickCallback</em>.</li>
+              <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>
+              <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
+              page.</li>
+              <li>If you click directly on a point, then an alert box will
+              indicate that you've clicked on a point. That's because the
+              <em>pointClickCallback</em> was defined already.</li>
+              <li><b>Have fun and send feedback!</b></li>
+            </ol>
+            <h3>tips</h3>
+            The palette on the right contains (most) Dygraphs options. Here's
+            how they work:
+            <ul>
+              <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>
+              <li>Each field has specific types. The types are not documented,
+              but if you hover over an entry (or click on it) it will give you a
+              hint.</li>
+              <li>Enter a new value for the option, and hit the
+              <code>enter</code> key, or the <em>Refresh</em> button.</li>
+              <li>Some types require special consideration:
+                <li>integers, floats, strings and booleans can be entered
+                as-is.</li>
+                <li>arrays of elements can be comma-separated <em>except string
+                  arrays, which are (at the moment) semicolon-separated (anyone
+                  interested in making a good string array parser, take a shot.</em></li>
+                <li>Callbacks are defined in a (crappy tiny) dialog box. If the
+                function isn't defined, then a prototype of the function will be
+                presented to the user.</li>
+              </li>
+            </ul>
+
+            Then in the filter text box, type "point". Set drawPoints: true and
+            pointSize: 5.
+            You get the idea.
+          </div>
         </td>
         <td valign="top"><div class="palette" id="optionsPalette"></div></td>
      </tr>