tests/unboxed-spark.html

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