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]--> | |
| 0193e7ef | 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> |
| 0193e7ef | 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> | |
| 32 | Other messages: | |
| 33 | <div id="messages"></div> | |
| f3fe39ed RK |
34 | <div id="moreinstructions"> |
| 35 | <h3>Learn By Doing</h3> | |
| 36 | <ol> | |
| 37 | <li>In the filter box, type <code>point</code>.</li> | |
| 38 | <li>In the <em>drawPoints</em> text box, enter <code>true</code></li> | |
| 39 | <li>Press <code>enter</code> or click <em>Refresh</em>. You will | |
| 40 | see dots on the graph where points exist.</li> | |
| 41 | <li>In the <em>pointSize</em> text box, enter <code>5</code></li> | |
| 42 | <li>Press <code>enter</code> or click <em>Refresh</em>. The dots | |
| 43 | just got larger.</li> | |
| 44 | <li>Type <code>callback</code> in the filter box.</li> | |
| 45 | <li>Instead of a text box, you will see buttons that can be used | |
| 46 | to define callbacks. Click the button for <em>clickCallback</em>.</li> | |
| 47 | <li>You will see that the prototype function body is | |
| 48 | <code>function(e, x, points){ }</code>. Paste in this | |
| 49 | replacement function:<p/> | |
| ce50b6e8 RK |
50 | <code>function(e, x){<br/> var elem = |
| 51 | document.getElementById("messages");<br/> elem.innerHTML = | |
| 52 | elem.innerHTML + x + "<br>";<br/>}</code></li> | |
| f3fe39ed RK |
53 | <li>Click the <em>OK</em> button. The <em>clickCallback</em> |
| 54 | button now says <code>defined</code> instead of <code>not defined</code>.</li> | |
| 55 | <li>Click anywhere on the graph. The x-value will appear on the | |
| 56 | page.</li> | |
| 57 | <li>If you click directly on a point, then an alert box will | |
| 58 | indicate that you've clicked on a point. That's because the | |
| 59 | <em>pointClickCallback</em> was defined already.</li> | |
| 60 | <li><b>Have fun and send feedback!</b></li> | |
| 61 | </ol> | |
| 62 | <h3>tips</h3> | |
| 63 | The palette on the right contains (most) Dygraphs options. Here's | |
| 64 | how they work: | |
| 65 | <ul> | |
| a2a0bc2d | 66 | <li>The selection box on top can be used to choose your own data source.</li> |
| f3fe39ed RK |
67 | <li>Use the filter box to constrain your selection. For instance, |
| 68 | typing <code>draw</code> will show all options with that phrase in | |
| 69 | its name.</li> | |
| 70 | <li>Each field has specific types. The types are not documented, | |
| 71 | but if you hover over an entry (or click on it) it will give you a | |
| 72 | hint.</li> | |
| 73 | <li>Enter a new value for the option, and hit the | |
| 74 | <code>enter</code> key, or the <em>Refresh</em> button.</li> | |
| 75 | <li>Some types require special consideration: | |
| 76 | <li>integers, floats, strings and booleans can be entered | |
| 77 | as-is.</li> | |
| 78 | <li>arrays of elements can be comma-separated <em>except string | |
| 79 | arrays, which are (at the moment) semicolon-separated (anyone | |
| 80 | interested in making a good string array parser, take a shot.</em></li> | |
| 81 | <li>Callbacks are defined in a (crappy tiny) dialog box. If the | |
| 82 | function isn't defined, then a prototype of the function will be | |
| 83 | presented to the user.</li> | |
| 84 | </li> | |
| 85 | </ul> | |
| 86 | ||
| 87 | Then in the filter text box, type "point". Set drawPoints: true and | |
| 88 | pointSize: 5. | |
| 89 | You get the idea. | |
| 90 | </div> | |
| 20590000 | 91 | </td> |
| 5130c627 | 92 | <td valign="top"><div id="optionsPalette"></div></td> |
| 20590000 RK |
93 | </tr> |
| 94 | </table> | |
| 95 | </body> | |
| 36d4fabf | 96 | <script type="text/javascript">Index.start();</script> |
| 20590000 | 97 | </html> |