tests/unboxed-spark.html

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