Commit | Line | Data |
---|---|---|
592f449f DV |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
592f449f | 5 | <title>dygraphs unboxed</title> |
fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
7e5ddc94 | 7 | |
592f449f DV |
8 | <script type="text/javascript" src="data.js"></script> |
9 | <style type="text/css"> | |
10 | #div_spark { | |
01681f66 | 11 | display: inline-block; |
592f449f DV |
12 | } |
13 | </style> | |
14 | </head> | |
15 | <body> | |
16 | <p>This shows dygraphs without any boxlike elements (i.e. axes or grids):</p> | |
362d4b90 | 17 | <div id="div_g" style="width:600px; height:300px; border:1px solid white;"></div> |
592f449f DV |
18 | |
19 | <script type="text/javascript"> | |
20 | var show_box = false; | |
21 | g = new Dygraph( | |
22 | document.getElementById("div_g"), | |
23 | data, { | |
bfb3e0a4 RK |
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 | } | |
592f449f DV |
34 | } |
35 | ); | |
36 | ||
37 | function toggleBox(btn) { | |
38 | show_box = !show_box; | |
362d4b90 | 39 | document.getElementById("div_g").style.border = show_box ? '1px solid black' : '1px solid white'; |
592f449f DV |
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"> | |
f6fbf9e0 | 56 | var g2 = new Dygraph( |
592f449f DV |
57 | document.getElementById("div_spark"), |
58 | data, { | |
bfb3e0a4 RK |
59 | axes : { |
60 | x : { | |
61 | drawGrid: false, | |
62 | drawAxis : false, | |
63 | }, | |
64 | y : { | |
65 | drawGrid: false, | |
66 | drawAxis : false, | |
67 | } | |
68 | }, | |
592f449f DV |
69 | strokeWidth: 1.0, |
70 | rollPeriod: 7, | |
71 | labelsDiv: '', | |
72 | highlightCircleSize: 2 | |
73 | } | |
74 | ); | |
75 | </script> | |
76 | </body> | |
77 | </html> |