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