Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
46dde5f9 DV |
2 | <html> |
3 | <head> | |
fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
46dde5f9 | 5 | <title>Per-Series Properties</title> |
fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
7e5ddc94 | 7 | |
46dde5f9 DV |
8 | </head> |
9 | <body> | |
10 | <h2>Chart with per-series properties</h2> | |
11 | <div id="demodiv"></div> | |
79253bd0 | 12 | <h2>Chart with per-series properties with legend.</h2> |
13 | <div id="demodiv2"></div> | |
46dde5f9 | 14 | <script type="text/javascript"> |
79253bd0 | 15 | data = function() { |
16 | var zp = function(x) { if (x < 10) return "0"+x; else return x; }; | |
17 | var r = "date,parabola,line,another line,sine wave,sine wave2\n"; | |
18 | for (var i=1; i<=31; i++) { | |
19 | r += "200610" + zp(i); | |
20 | r += "," + 10*(i*(31-i)); | |
21 | r += "," + 10*(8*i); | |
22 | r += "," + 10*(250 - 8*i); | |
23 | r += "," + 10*(125 + 125 * Math.sin(0.3*i)); | |
24 | r += "," + 10*(125 + 125 * Math.sin(0.3*i+Math.PI)); | |
25 | r += "\n"; | |
26 | } | |
27 | return r; | |
28 | }; | |
46dde5f9 DV |
29 | g = new Dygraph( |
30 | document.getElementById("demodiv"), | |
79253bd0 | 31 | data, |
46dde5f9 DV |
32 | { |
33 | strokeWidth: 2, | |
30abcfb6 RK |
34 | series : { |
35 | 'parabola': { | |
36 | strokeWidth: 0.0, | |
37 | drawPoints: true, | |
38 | pointSize: 4, | |
39 | highlightCircleSize: 6 | |
40 | }, | |
41 | 'line': { | |
42 | strokeWidth: 1.0, | |
43 | drawPoints: true, | |
44 | pointSize: 1.5 | |
45 | }, | |
46 | 'sine wave': { | |
47 | strokeWidth: 3, | |
48 | highlightCircleSize: 10 | |
49 | }, | |
50 | 'sine wave2': { | |
51 | strokePattern: [10, 2, 5, 2], | |
52 | strokeWidth: 2, | |
53 | highlightCircleSize: 3 | |
54 | } | |
55 | } | |
56 | } | |
57 | ); | |
58 | g2 = new Dygraph( | |
59 | document.getElementById("demodiv2"), | |
60 | data, | |
61 | { | |
62 | legend: 'always', | |
63 | strokeWidth: 2, | |
27fd63fc DV |
64 | series: { |
65 | 'parabola': { | |
66 | strokePattern: null, | |
67 | drawPoints: true, | |
68 | pointSize: 4, | |
69 | highlightCircleSize: 6 | |
70 | }, | |
71 | 'line': { | |
72 | strokePattern: Dygraph.DASHED_LINE, | |
73 | strokeWidth: 1.0, | |
74 | drawPoints: true, | |
75 | pointSize: 1.5 | |
76 | }, | |
77 | 'another line': { | |
78 | strokePattern: [25, 5] | |
79 | }, | |
80 | 'sine wave': { | |
81 | strokePattern: Dygraph.DOTTED_LINE, | |
82 | strokeWidth: 3, | |
83 | highlightCircleSize: 10 | |
84 | }, | |
85 | 'sine wave2': { | |
86 | strokePattern: Dygraph.DOT_DASH_LINE, | |
87 | strokeWidth: 2, | |
88 | highlightCircleSize: 3 | |
89 | } | |
79253bd0 | 90 | } |
91 | } | |
92 | ); | |
46dde5f9 DV |
93 | </script> |
94 | </body> | |
95 | </html> |