Other messages:
Learn By Doing
- 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!
tips
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.
|
|