tests/visibility.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>visibility</title>
   5     <!--[if IE]>
   6     <script type="text/javascript" src="../excanvas.js"></script>
   7     <![endif]-->
   8     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   9     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  10     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  11     <script type="text/javascript" src="../dygraph.js"></script>
  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>
  24     </p>
  25
  26     <p>g.visibility() = <span id="visibility"></span></p>
  27
  28
  29     <script type="text/javascript">
  30       g = new Dygraph(
  31             document.getElementById("div_g"),
  32             NoisyData, {
  33               rollPeriod: 7,
  34               errorBars: true,
  35               visibility: [false, true]
  36             }
  37           );
  38       setStatus();
  39
  40       function setStatus() {
  41         document.getElementById("visibility").innerHTML =
  42           g.visibility().toString();
  43       }
  44
  45       function change(el) {
  46         g.setVisibility(parseInt(el.id), el.checked);
  47         setStatus();
  48       }
  49     </script>
  50
  51   </body>
  52 </html>