From: Robert Konigsberg Date: Sat, 29 Dec 2012 02:26:01 +0000 (-0500) Subject: Clean up instructions section of the palette; hide it until we need it. X-Git-Tag: v1.0.0~139^2~4 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=e664574785f3b5a3c7cfc86be46263eb438cbc5b;p=dygraphs.git Clean up instructions section of the palette; hide it until we need it. --- diff --git a/experimental/palette/index.css b/experimental/palette/index.css index d17ca62..ca171f4 100644 --- a/experimental/palette/index.css +++ b/experimental/palette/index.css @@ -7,3 +7,12 @@ margin-left: auto; margin-right: auto; } + +#toggleInstructions { + color: #0000DD; +} + +#toggleInstructions:hover { + color: #0000FF; + text-decoration: underline; +} diff --git a/experimental/palette/index.html b/experimental/palette/index.html index 3a4536b..8951811 100644 --- a/experimental/palette/index.html +++ b/experimental/palette/index.html @@ -29,68 +29,76 @@
- Other messages: -
-
-

Learn By Doing

-
    -
  1. In the filter box, type point.
  2. -
  3. In the drawPoints text box, toggle the value until true appears
  4. -
  5. You will see dots on the graph where points exist.
  6. -
  7. In the pointSize text box, enter 5
  8. -
  9. Press enter or click Refresh. The dots - just got larger.
  10. -
  11. Type callback in the filter box.
  12. -
  13. Instead of a text box, you will see buttons that can be used - to define callbacks. Click the button for clickCallback.
  14. -
  15. 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>";
    }

  16. -
  17. Click the OK button. The clickCallback - button now says defined instead of not defined.
  18. -
  19. Click anywhere on the graph. The x-value will appear on the - page.
  20. -
  21. 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.
  22. -
  23. Have fun and send feedback!
  24. -
-

tips

- The palette on the right contains (most) Dygraphs options. Here's - how they work: - - - Then in the filter text box, type "point". Set drawPoints: true and - pointSize: 5. - You get the idea. +
+ instructions +
- +