Commit | Line | Data |
---|---|---|
592f449f DV |
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> |