tests/visibility.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/dygraph.css">
   5     <title>visibility</title>
   6     <!--
   7     For production (minified) code, use:
   8     <script type="text/javascript" src="dygraph-combined.js"></script>
   9     -->
  10     <script type="text/javascript" src="../dist/dygraph.js"></script>
  11
  12     <script type="text/javascript" src="data.js"></script>
  13   </head>
  14   <body>
  15     <h3>Click the check boxes to toggle series visibility</h3>
  16     <div id="div_g" style="width:600px; height:300px;"></div>
  17
  18     <p><b>Show Series:</b></p>
  19     <p>
  20       <input type=checkbox id="0" onClick="change(this)">
  21       <label for="0"> A</label><br/>
  22       <input type=checkbox id="1" checked onClick="change(this)">
  23       <label for="1"> B</label><br/>
  24       <input type=checkbox id="2" checked onClick="change(this)">
  25       <label for="2"> C</label>
  26     </p>
  27
  28     <p>g.visibility() = <span id="visibility"></span></p>
  29
  30
  31     <script type="text/javascript">
  32       g = new Dygraph(
  33             document.getElementById("div_g"),
  34             NoisyDataABC, {
  35               rollPeriod: 7,
  36               errorBars: true,
  37               visibility: [false, true, true]
  38             }
  39           );
  40       setStatus();
  41
  42       function setStatus() {
  43         document.getElementById("visibility").innerHTML =
  44           g.visibility().toString();
  45       }
  46
  47       function change(el) {
  48         g.setVisibility(parseInt(el.id), el.checked);
  49         setStatus();
  50       }
  51     </script>
  52
  53   </body>
  54 </html>