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

- The palette on the right contains (most) Dygraphs options. Here's - how they work: -

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. +

+ instructions +

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

+ 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. +

Palette