experimental/palette/index.html

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