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     <!--
  10     For production (minified) code, use:
  11     <script type="text/javascript" src="dygraph-combined.js"></script>
  12     -->
  13     <script type="text/javascript" src="../dygraph-dev.js"></script>
  14
  15     <script type="text/javascript" src="data.js"></script>
  16     <style type="text/css">
  17       #div_spark {
  18         display: inline-block;
  19       }
  20     </style>
  21   </head>
  22   <body>
  23     <p>This shows dygraphs without any boxlike elements (i.e. axes or grids):</p>
  24     <div id="div_g" style="width:600px; height:300px; border:1px solid white;"></div>
  25
  26     <script type="text/javascript">
  27       var show_box = false;
  28       g = new Dygraph(
  29             document.getElementById("div_g"),
  30             data, {
  31               drawXAxis: show_box,
  32               drawYAxis: show_box,
  33               drawXGrid: show_box,
  34               drawYGrid: show_box
  35             }
  36           );
  37
  38       function toggleBox(btn) {
  39         show_box = !show_box;
  40         document.getElementById("div_g").style.border = show_box ? '1px solid black' : '1px solid white';
  41         if (show_box) {
  42           btn.innerHTML = 'Hide box';
  43         } else {
  44           btn.innerHTML = 'Show box';
  45         }
  46       }
  47     </script>
  48
  49     <button onClick='toggleBox(this)'>Show box</button>
  50
  51     <!-- 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. -->
  52     <p>
  53     <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>
  54     </p>
  55
  56     <script type="text/javascript">
  57       var g2 = new Dygraph(
  58             document.getElementById("div_spark"),
  59             data, {
  60               drawXAxis: false,
  61               drawYAxis: false,
  62               drawXGrid: false,
  63               drawYGrid: false,
  64               strokeWidth: 1.0,
  65               rollPeriod: 7,
  66               labelsDiv: '',
  67               highlightCircleSize: 2
  68             }
  69           );
  70     </script>
  71   </body>
  72 </html>