Rewrite tests to use ES6 modules.
[dygraphs.git] / tests / unboxed-spark.html
CommitLineData
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, {
bfb3e0a4
RK
27 axes : {
28 x : {
29 drawGrid: show_box,
30 drawAxis : show_box,
31 },
32 y : {
33 drawGrid: show_box,
34 drawAxis : show_box,
35 }
36 }
592f449f
DV
37 }
38 );
39
40 function toggleBox(btn) {
41 show_box = !show_box;
362d4b90 42 document.getElementById("div_g").style.border = show_box ? '1px solid black' : '1px solid white';
592f449f
DV
43 if (show_box) {
44 btn.innerHTML = 'Hide box';
45 } else {
46 btn.innerHTML = 'Show box';
47 }
48 }
49 </script>
50
51 <button onClick='toggleBox(this)'>Show box</button>
52
53 <!-- 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. -->
54 <p>
55 <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>
56 </p>
57
58 <script type="text/javascript">
f6fbf9e0 59 var g2 = new Dygraph(
592f449f
DV
60 document.getElementById("div_spark"),
61 data, {
bfb3e0a4
RK
62 axes : {
63 x : {
64 drawGrid: false,
65 drawAxis : false,
66 },
67 y : {
68 drawGrid: false,
69 drawAxis : false,
70 }
71 },
592f449f
DV
72 strokeWidth: 1.0,
73 rollPeriod: 7,
74 labelsDiv: '',
75 highlightCircleSize: 2
76 }
77 );
78 </script>
79 </body>
80</html>