Commit | Line | Data |
---|---|---|
592f449f DV |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
592f449f | 4 | <title>dygraphs unboxed</title> |
7e5ddc94 DV |
5 | <!-- |
6 | For production (minified) code, use: | |
7 | <script type="text/javascript" src="dygraph-combined.js"></script> | |
8 | --> | |
9 | <script type="text/javascript" src="../dygraph-dev.js"></script> | |
10 | ||
592f449f DV |
11 | <script type="text/javascript" src="data.js"></script> |
12 | <style type="text/css"> | |
13 | #div_spark { | |
01681f66 | 14 | display: inline-block; |
592f449f DV |
15 | } |
16 | </style> | |
17 | </head> | |
18 | <body> | |
19 | <p>This shows dygraphs without any boxlike elements (i.e. axes or grids):</p> | |
362d4b90 | 20 | <div id="div_g" style="width:600px; height:300px; border:1px solid white;"></div> |
592f449f DV |
21 | |
22 | <script type="text/javascript"> | |
23 | var show_box = false; | |
24 | g = new Dygraph( | |
25 | document.getElementById("div_g"), | |
26 | data, { | |
27 | drawXAxis: show_box, | |
28 | drawYAxis: show_box, | |
29 | drawXGrid: show_box, | |
30 | drawYGrid: show_box | |
31 | } | |
32 | ); | |
33 | ||
34 | function toggleBox(btn) { | |
35 | show_box = !show_box; | |
362d4b90 | 36 | document.getElementById("div_g").style.border = show_box ? '1px solid black' : '1px solid white'; |
592f449f DV |
37 | if (show_box) { |
38 | btn.innerHTML = 'Hide box'; | |
39 | } else { | |
40 | btn.innerHTML = 'Show box'; | |
41 | } | |
42 | } | |
43 | </script> | |
44 | ||
45 | <button onClick='toggleBox(this)'>Show box</button> | |
46 | ||
47 | <!-- 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. --> | |
48 | <p> | |
49 | <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> | |
50 | </p> | |
51 | ||
52 | <script type="text/javascript"> | |
f6fbf9e0 | 53 | var g2 = new Dygraph( |
592f449f DV |
54 | document.getElementById("div_spark"), |
55 | data, { | |
56 | drawXAxis: false, | |
57 | drawYAxis: false, | |
58 | drawXGrid: false, | |
59 | drawYGrid: false, | |
60 | strokeWidth: 1.0, | |
61 | rollPeriod: 7, | |
62 | labelsDiv: '', | |
63 | highlightCircleSize: 2 | |
64 | } | |
65 | ); | |
66 | </script> | |
67 | </body> | |
68 | </html> |