projects / dygraphs.git / blame
| Commit | Line | Data |
|---|---|---|
| 20590000 RK |
1 | <!DOCTYPE html> |
| 2 | <html> | |
| 3 | <head> | |
| 4 | <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> | |
| 5 | <title>Palette Demo</title> | |
| 6 | <!--[if IE]> | |
| 7 | <script type="text/javascript" src="../../excanvas.js"></script> | |
| 8 | <![endif]--> | |
| 9 | <script type="text/javascript" src="../../dygraph-dev.js"></script> | |
| 10 | <script type="text/javascript" src="options.js"></script> | |
| b4977548 | 11 | <script type="text/javascript" src="../../common/textarea.js"></script> |
| 44885208 | 12 | <script type="text/javascript" src="tooltip.js"></script> |
| 20590000 | 13 | <script type="text/javascript" src="palette.js"></script> |
| 36d4fabf | 14 | <script type="text/javascript" src="samples.js"></script> |
| 20590000 | 15 | <script type="text/javascript" src="index.js"></script> |
| 36d4fabf | 16 | <link rel="stylesheet" type="text/css" href="index.css" /> |
| 20590000 RK |
17 | </head> |
| 18 | <body> | |
| 19 | <h2>Palette</h2> | |
| 20 | <div style="font-size:smaller;"><p>To configure this chart, tweak the values on the right. | |
| 21 | Enter applies changes, and the filter bar on the top reduces selections</p></div> | |
| 22 | <table> | |
| 23 | <tr> | |
| 24 | <td valign="top"> | |
| 36d4fabf | 25 | <div id="selector"> |
| 2b3ebdd9 | 26 | <select></select> |
| 36d4fabf | 27 | </div> |
| 20590000 RK |
28 | <div id="graph"></div> |
| 29 | <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div> | |
| 30 | Other messages: | |
| 31 | <div id="messages"></div> | |
| f3fe39ed RK |
32 | <div id="moreinstructions"> |
| 33 | <h3>Learn By Doing</h3> | |
| 34 | <ol> | |
| 35 | <li>In the filter box, type <code>point</code>.</li> | |
| 36 | <li>In the <em>drawPoints</em> text box, enter <code>true</code></li> | |
| 37 | <li>Press <code>enter</code> or click <em>Refresh</em>. You will | |
| 38 | see dots on the graph where points exist.</li> | |
| 39 | <li>In the <em>pointSize</em> text box, enter <code>5</code></li> | |
| 40 | <li>Press <code>enter</code> or click <em>Refresh</em>. The dots | |
| 41 | just got larger.</li> | |
| 42 | <li>Type <code>callback</code> in the filter box.</li> | |
| 43 | <li>Instead of a text box, you will see buttons that can be used | |
| 44 | to define callbacks. Click the button for <em>clickCallback</em>.</li> | |
| 45 | <li>You will see that the prototype function body is | |
| 46 | <code>function(e, x, points){ }</code>. Paste in this | |
| 47 | replacement function:<p/> | |
| ce50b6e8 RK |
48 | <code>function(e, x){<br/> var elem = |
| 49 | document.getElementById("messages");<br/> elem.innerHTML = | |
| 50 | elem.innerHTML + x + "<br>";<br/>}</code></li> | |
| f3fe39ed RK |
51 | <li>Click the <em>OK</em> button. The <em>clickCallback</em> |
| 52 | button now says <code>defined</code> instead of <code>not defined</code>.</li> | |
| 53 | <li>Click anywhere on the graph. The x-value will appear on the | |
| 54 | page.</li> | |
| 55 | <li>If you click directly on a point, then an alert box will | |
| 56 | indicate that you've clicked on a point. That's because the | |
| 57 | <em>pointClickCallback</em> was defined already.</li> | |
| 58 | <li><b>Have fun and send feedback!</b></li> | |
| 59 | </ol> | |
| 60 | <h3>tips</h3> | |
| 61 | The palette on the right contains (most) Dygraphs options. Here's | |
| 62 | how they work: | |
| 63 | <ul> | |
| a2a0bc2d | 64 | <li>The selection box on top can be used to choose your own data source.</li> |
| f3fe39ed RK |
65 | <li>Use the filter box to constrain your selection. For instance, |
| 66 | typing <code>draw</code> will show all options with that phrase in | |
| 67 | its name.</li> | |
| 68 | <li>Each field has specific types. The types are not documented, | |
| 69 | but if you hover over an entry (or click on it) it will give you a | |
| 70 | hint.</li> | |
| 71 | <li>Enter a new value for the option, and hit the | |
| 72 | <code>enter</code> key, or the <em>Refresh</em> button.</li> | |
| 73 | <li>Some types require special consideration: | |
| 74 | <li>integers, floats, strings and booleans can be entered | |
| 75 | as-is.</li> | |
| 76 | <li>arrays of elements can be comma-separated <em>except string | |
| 77 | arrays, which are (at the moment) semicolon-separated (anyone | |
| 78 | interested in making a good string array parser, take a shot.</em></li> | |
| 79 | <li>Callbacks are defined in a (crappy tiny) dialog box. If the | |
| 80 | function isn't defined, then a prototype of the function will be | |
| 81 | presented to the user.</li> | |
| 82 | </li> | |
| 83 | </ul> | |
| 84 | ||
| 85 | Then in the filter text box, type "point". Set drawPoints: true and | |
| 86 | pointSize: 5. | |
| 87 | You get the idea. | |
| 88 | </div> | |
| 20590000 | 89 | </td> |
| 5130c627 | 90 | <td valign="top"><div id="optionsPalette"></div></td> |
| 20590000 RK |
91 | </tr> |
| 92 | </table> | |
| 93 | </body> | |
| 36d4fabf | 94 | <script type="text/javascript">Index.start();</script> |
| 20590000 | 95 | </html> |