Learn By Doing

1. In the filter box, type point.
2. Click the drawPoints toggle button until true appears
3. You will see dots on the graph where points exist.
4. In the pointSize text box, enter 5
5. Press enter or click Refresh. The dots just got larger.
6. Type callback in the filter box.
7. Instead of a text box, you will see buttons that can be used to define callbacks. Click the button for clickCallback.
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. Click the OK button. The clickCallback button now says defined instead of not defined.
10. Click anywhere on the graph. The x-value will appear on the page.
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. Have fun and send feedback!

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.