## Palette

To configure this chart, tweak the values on the right. Enter applies changes, and the filter bar on the top reduces selections

Other messages:

### Learn By Doing

1. In the filter box, type `point`.
2. In the drawPoints text box, enter `true`
3. Press `enter` or click Refresh. 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.