4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Palette Demo
</title>
7 <script type=
"text/javascript" src=
"../../excanvas.js"></script>
9 <script type=
"text/javascript" src=
"../../dygraph-dev.js"></script>
10 <script type=
"text/javascript" src=
"options.js"></script>
11 <script type=
"text/javascript" src=
"palette.js"></script>
12 <script type=
"text/javascript" src=
"index.js"></script>
13 <link rel=
"stylesheet" type=
"text/css" href=
"palette.css" />
19 <div style=
"font-size:smaller;"><p>To configure this chart, tweak the values on the right.
20 Enter applies changes, and the filter bar on the top reduces selections
</p></div>
24 <div id=
"graph"></div>
25 <div id=
"status" style=
"width:200px; font-size:0.8em; padding-top:5px;"></div>
27 <div id=
"messages"></div>
28 <div id=
"moreinstructions">
29 <h3>Learn By Doing
</h3>
31 <li>In the filter box, type
<code>point
</code>.
</li>
32 <li>In the
<em>drawPoints
</em> text box, enter
<code>true
</code></li>
33 <li>Press
<code>enter
</code> or click
<em>Refresh
</em>. You will
34 see dots on the graph where points exist.
</li>
35 <li>In the
<em>pointSize
</em> text box, enter
<code>5</code></li>
36 <li>Press
<code>enter
</code> or click
<em>Refresh
</em>. The dots
38 <li>Type
<code>callback
</code> in the filter box.
</li>
39 <li>Instead of a text box, you will see buttons that can be used
40 to define callbacks. Click the button for
<em>clickCallback
</em>.
</li>
41 <li>You will see that the prototype function body is
42 <code>function(e, x, points){ }
</code>. Paste in this
43 replacement function:
<p/>
44 <code>function(e, x){ var elem =
45 document.getElementById(
"messages"); elem.innerHTML =
46 elem.innerHTML + x +
"<br>"; }
</code></li>
47 <li>Click the
<em>OK
</em> button. The
<em>clickCallback
</em>
48 button now says
<code>defined
</code> instead of
<code>not defined
</code>.
</li>
49 <li>Click anywhere on the graph. The x-value will appear on the
51 <li>If you click directly on a point, then an alert box will
52 indicate that you've clicked on a point. That's because the
53 <em>pointClickCallback
</em> was defined already.
</li>
54 <li><b>Have fun and send feedback!
</b></li>
57 The palette on the right contains (most) Dygraphs options. Here's
60 <li>Use the filter box to constrain your selection. For instance,
61 typing
<code>draw
</code> will show all options with that phrase in
63 <li>Each field has specific types. The types are not documented,
64 but if you hover over an entry (or click on it) it will give you a
66 <li>Enter a new value for the option, and hit the
67 <code>enter
</code> key, or the
<em>Refresh
</em> button.
</li>
68 <li>Some types require special consideration:
69 <li>integers, floats, strings and booleans can be entered
71 <li>arrays of elements can be comma-separated
<em>except string
72 arrays, which are (at the moment) semicolon-separated (anyone
73 interested in making a good string array parser, take a shot.
</em></li>
74 <li>Callbacks are defined in a (crappy tiny) dialog box. If the
75 function isn't defined, then a prototype of the function will be
76 presented to the user.
</li>
80 Then in the filter text box, type
"point". Set drawPoints: true and
85 <td valign=
"top"><div class=
"palette" id=
"optionsPalette"></div></td>
89 <script type=
"text/javascript">start();
</script>