X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=experimental%2Fpalette%2Findex.html;h=e5f1754c2adb1258ed0c8e6dc6bcd69968bd9049;hb=b49775481c37d9c849d91c25221e84349477361f;hp=610d352f2937237fd3f2a5d1d07e87994554b79f;hpb=205900008a083c27e85995aec2b90e81e6d51c9e;p=dygraphs.git diff --git a/experimental/palette/index.html b/experimental/palette/index.html index 610d352..e5f1754 100644 --- a/experimental/palette/index.html +++ b/experimental/palette/index.html @@ -8,11 +8,12 @@ + + + - - +

Palette

@@ -21,14 +22,74 @@ - +
+
+ +
Other messages:
+
+

Learn By Doing

+
    +
  1. In the filter box, type point.
    2. +
  2. In the drawPoints text box, enter true
    3. +
  3. Press enter or click Refresh. You will + see dots on the graph where points exist.
    4. +
  4. In the pointSize text box, enter 5
    5. +
  5. Press enter or click Refresh. The dots + just got larger.
    6. +
  6. Type callback in the filter box.
    7. +
  7. Instead of a text box, you will see buttons that can be used + to define callbacks. Click the button for clickCallback.
    8. +
  8. You will see that the prototype function body is + function(e, x, points){ }. Paste in this + replacement function:

    + function(e, x){
      var elem = + document.getElementById("messages");
      elem.innerHTML = + elem.innerHTML + x + "<br>";
    }

    9. +
  9. Click the OK button. The clickCallback + button now says defined instead of not defined.
    10. +
  10. Click anywhere on the graph. The x-value will appear on the + page.
    11. +
  11. If you click directly on a point, then an alert box will + indicate that you've clicked on a point. That's because the + pointClickCallback was defined already.
    12. +
  12. Have fun and send feedback!
    13. +
+

tips

+ The palette on the right contains (most) Dygraphs options. Here's + how they work: +
    +
  • The selection box on top can be used to choose your own data source.
    • +
  • Use the filter box to constrain your selection. For instance, + typing draw will show all options with that phrase in + its name.
    • +
  • 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.
    • +
  • Enter a new value for the option, and hit the + enter key, or the Refresh button.
    • +
  • Some types require special consideration: +
  • integers, floats, strings and booleans can be entered + as-is.
    • +
  • arrays of elements can be comma-separated except string + arrays, which are (at the moment) semicolon-separated (anyone + interested in making a good string array parser, take a shot.
    • +
  • 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.
    • + +
+ + Then in the filter text box, type "point". Set drawPoints: true and + pointSize: 5. + You get the idea. +
- +