Commit | Line | Data |
---|---|---|
17bdb194 TL |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
93a5bb4c | 4 | <link rel="stylesheet" href="../css/dygraph.css"> |
17bdb194 TL |
5 | <title>fillGraph with per series fillAlpha</title> |
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> |
17bdb194 TL |
11 | |
12 | </head> | |
13 | <body> | |
14 | <p>Filled, using default value</p> | |
15 | <div id="div_g0" style="width:600px; height:300px;"></div> | |
16 | ||
17 | <p>Filled, using global alpha value</p> | |
18 | <div id="div_g1" style="width:600px; height:300px;"></div> | |
19 | ||
20 | <p>Filled, using per series alpha values</p> | |
21 | <div id="div_g2" style="width:600px; height:300px;"></div> | |
22 | ||
23 | <p>Filled, using a mix of global and per series values</p> | |
24 | <div id="div_g3" style="width:600px; height:300px;"></div> | |
25 | ||
26 | <script type="text/javascript"> | |
27 | // Create some data for the charts | |
28 | var gdata = "X,Y1,Y2\n"; | |
29 | for (var i = 0; i < 100; i++) { | |
30 | gdata += i + "," + i + "," + (i * (100-i) * 100/(50*50)) + "\n"; | |
31 | } | |
32 | ||
33 | // Just use the default values | |
34 | var g0 = new Dygraph( | |
35 | document.getElementById("div_g0"), | |
36 | gdata, | |
37 | { | |
38 | fillGraph: true | |
39 | } | |
40 | ); | |
41 | ||
42 | var g1 = new Dygraph( | |
43 | document.getElementById("div_g1"), | |
44 | gdata, | |
45 | { | |
46 | fillGraph: true, | |
47 | fillAlpha: 0.8 | |
48 | } | |
49 | ); | |
50 | ||
51 | var g2 = new Dygraph( | |
52 | document.getElementById("div_g2"), | |
53 | gdata, | |
54 | { | |
55 | fillGraph: true, | |
56 | series: { | |
57 | Y1: { fillAlpha: 0.9 }, | |
58 | Y2: { fillAlpha: 0.1 } | |
59 | } | |
60 | } | |
61 | ); | |
62 | ||
63 | var g3 = new Dygraph( | |
64 | document.getElementById("div_g3"), | |
65 | gdata, | |
66 | { | |
67 | fillGraph: true, | |
68 | fillAlpha: 0.9, | |
69 | series: { | |
70 | Y2: { fillAlpha: 0.1 } | |
71 | } | |
72 | } | |
73 | ); | |
74 | ||
75 | ||
76 | </script> | |
77 | </body> | |
78 | </html> |