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