Add a:visited style to link-interaction (#819)
[dygraphs.git] / 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>