[dygraphs.git] / experimental / palette / index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Palette Demo</title>
    <!--[if IE]>
    <script type="text/javascript" src="../../excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../../dygraph-dev.js"></script>
    <script type="text/javascript" src="options.js"></script>
    <script type="text/javascript" src="palette.js"></script>
    <script type="text/javascript" src="samples.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <style>
    </style>
  </head>
  <body>
    <h2>Palette</h2>
    <div style="font-size:smaller;"><p>To configure this chart, tweak the values on the right.
    Enter applies changes, and the filter bar on the top reduces selections</p></div>
    <table>
      <tr>
        <td valign="top">
          <div id="selector">
            <select id="dataSelector">
              <option value="interestingShapes">Interesting Shapes</option>
              <option value="manyPoints">Many Points</option>
              <option value="sparse">Sparse</option>
            </select>
          </div>
          <div id="graph"></div>
          <div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
          Other messages:
          <div id="messages"></div>
          <div id="moreinstructions">
            <h3>Learn By Doing</h3>
            <ol>
              <li>In the filter box, type <code>point</code>.</li>
              <li>In the <em>drawPoints</em> text box, enter <code>true</code></li>
              <li>Press <code>enter</code> or click <em>Refresh</em>. You will
              see dots on the graph where points exist.</li>
              <li>In the <em>pointSize</em> text box, enter <code>5</code></li>
              <li>Press <code>enter</code> or click <em>Refresh</em>. The dots
              just got larger.</li>
              <li>Type <code>callback</code> in the filter box.</li>
              <li>Instead of a text box, you will see buttons that can be used
              to define callbacks. Click the button for <em>clickCallback</em>.</li>
              <li>You will see that the prototype function body is
              <code>function(e, x, points){ }</code>. Paste in this
              replacement function:<p/>
              <code>function(e, x){ var elem =
                document.getElementById("messages"); elem.innerHTML =
                elem.innerHTML + x + "&lt;br&gt;"; }</code></li>
              <li>Click the <em>OK</em> button. The <em>clickCallback</em>
              button now says <code>defined</code> instead of <code>not defined</code>.</li>
              <li>Click anywhere on the graph. The x-value will appear on the
              page.</li>
              <li>If you click directly on a point, then an alert box will
              indicate that you've clicked on a point. That's because the
              <em>pointClickCallback</em> was defined already.</li>
              <li><b>Have fun and send feedback!</b></li>
            </ol>
            <h3>tips</h3>
            The palette on the right contains (most) Dygraphs options. Here's
            how they work:
            <ul>
              <li>Use the filter box to constrain your selection. For instance,
              typing <code>draw</code> will show all options with that phrase in
              its name.</li>
              <li>Each field has specific types. The types are not documented,
              but if you hover over an entry (or click on it) it will give you a
              hint.</li>
              <li>Enter a new value for the option, and hit the
              <code>enter</code> key, or the <em>Refresh</em> button.</li>
              <li>Some types require special consideration:
                <li>integers, floats, strings and booleans can be entered
                as-is.</li>
                <li>arrays of elements can be comma-separated <em>except string
                  arrays, which are (at the moment) semicolon-separated (anyone
                  interested in making a good string array parser, take a shot.</em></li>
                <li>Callbacks are defined in a (crappy tiny) dialog box. If the
                function isn't defined, then a prototype of the function will be
                presented to the user.</li>
              </li>
            </ul>

            Then in the filter text box, type "point". Set drawPoints: true and
            pointSize: 5.
            You get the idea.
          </div>
        </td>
        <td valign="top"><div class="palette" id="optionsPalette"></div></td>
     </tr>
    </table>
  </body>
  <script type="text/javascript">Index.start();</script>
</html>
Commit	Line	Data
	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 + "<br>"; }</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>