tests/unboxed-spark.html

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