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