| | 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="jquery-1.8.3.min.js"></script> |
| | 10 | <script type="text/javascript" src="../../dygraph-dev.js"></script> |
| | 11 | <script type="text/javascript" src="options.js"></script> |
| | 12 | <script type="text/javascript" src="../../common/textarea.js"></script> |
| | 13 | <script type="text/javascript" src="tooltip.js"></script> |
| | 14 | <script type="text/javascript" src="palette.js"></script> |
| | 15 | <script type="text/javascript" src="multi-palette.js"></script> |
| | 16 | <script type="text/javascript" src="samples.js"></script> |
| | 17 | <script type="text/javascript" src="index.js"></script> |
| | 18 | <link rel="stylesheet" type="text/css" href="index.css" /> |
| | 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"> |
| | 27 | <div id="selector"> |
| | 28 | <select></select> |
| | 29 | </div> |
| | 30 | <div id="graph"></div> |
| | 31 | <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div> |
| | 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> |
| | 90 | </div> |
| | 91 | </td> |
| | 92 | <td valign="top"><div id="optionsPalette"></div></td> |
| | 93 | </tr> |
| | 94 | </table> |
| | 95 | </body> |
| | 96 | <script type="text/javascript"> |
| | 97 | Index.start(); |
| | 98 | $(function() { |
| | 99 | $("#toggleInstructions").click(function() { |
| | 100 | $("#instructions").toggle(500); |
| | 101 | }); |
| | 102 | }); |
| | 103 | </script> |
| | 104 | </html> |
projects / dygraphs.git / blame_incremental