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