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