tests/unboxed-spark.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>dygraphs unboxed</title>
   6     <!--[if IE]>
   7     <script type="text/javascript" src="../excanvas.js"></script>
   8     <![endif]-->
   9     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
  10     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  11     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  12     <script type="text/javascript" src="../dygraph.js"></script>
  13     <script type="text/javascript" src="data.js"></script>
  14     <style type="text/css">
  15       #div_spark {
  16         display: inline;
  17       }
  18     </style>
  19   </head>
  20   <body>
  21     <p>This shows dygraphs without any boxlike elements (i.e. axes or grids):</p>
  22     <div id="div_g" style="width:600px; height:300px;"></div>
  23
  24     <script type="text/javascript">
  25       var show_box = false;
  26       g = new Dygraph(
  27             document.getElementById("div_g"),
  28             data, {
  29               drawXAxis: show_box,
  30               drawYAxis: show_box,
  31               drawXGrid: show_box,
  32               drawYGrid: show_box
  33             }
  34           );
  35
  36       function toggleBox(btn) {
  37         show_box = !show_box;
  38         document.getElementById("div_g").style.border = show_box ? '1px solid black' : '';
  39         if (show_box) {
  40           btn.innerHTML = 'Hide box';
  41         } else {
  42           btn.innerHTML = 'Show box';
  43         }
  44       }
  45     </script>
  46
  47     <button onClick='toggleBox(this)'>Show box</button>
  48
  49     <!-- Dygraphs constructs a div inside of whatever div we pass in. So the container div can't be a span or have display: inline-block. We use a table to get the sparkline to display on the same line as the text. -->
  50     <p>
  51     <table><tr><td>This style can be used to produce interactive sparklines with dygraphs:</td><td><div id="div_spark" style="width:100px; height:20px;"></div></td></tr></table>
  52     </p>
  53
  54     <script type="text/javascript">
  55       new Dygraph(
  56             document.getElementById("div_spark"),
  57             data, {
  58               drawXAxis: false,
  59               drawYAxis: false,
  60               drawXGrid: false,
  61               drawYGrid: false,
  62               strokeWidth: 1.0,
  63               rollPeriod: 7,
  64               labelsDiv: '',
  65               highlightCircleSize: 2
  66             }
  67           );
  68     </script>
  69   </body>
  70 </html>