Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
46dde5f9 DV |
2 | <html> |
3 | <head> | |
93a5bb4c | 4 | <link rel="stylesheet" href="../css/dygraph.css"> |
46dde5f9 | 5 | <title>Per-Series Properties</title> |
7e5ddc94 DV |
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> |
7e5ddc94 | 11 | |
46dde5f9 DV |
12 | </head> |
13 | <body> | |
14 | <h2>Chart with per-series properties</h2> | |
15 | <div id="demodiv"></div> | |
79253bd0 | 16 | <h2>Chart with per-series properties with legend.</h2> |
17 | <div id="demodiv2"></div> | |
30abcfb6 RK |
18 | <h2>First graph, using old-style series specification.</h2> |
19 | <div id="demodiv3"></div> | |
46dde5f9 | 20 | <script type="text/javascript"> |
79253bd0 | 21 | data = function() { |
22 | var zp = function(x) { if (x < 10) return "0"+x; else return x; }; | |
23 | var r = "date,parabola,line,another line,sine wave,sine wave2\n"; | |
24 | for (var i=1; i<=31; i++) { | |
25 | r += "200610" + zp(i); | |
26 | r += "," + 10*(i*(31-i)); | |
27 | r += "," + 10*(8*i); | |
28 | r += "," + 10*(250 - 8*i); | |
29 | r += "," + 10*(125 + 125 * Math.sin(0.3*i)); | |
30 | r += "," + 10*(125 + 125 * Math.sin(0.3*i+Math.PI)); | |
31 | r += "\n"; | |
32 | } | |
33 | return r; | |
34 | }; | |
46dde5f9 DV |
35 | g = new Dygraph( |
36 | document.getElementById("demodiv"), | |
79253bd0 | 37 | data, |
46dde5f9 DV |
38 | { |
39 | strokeWidth: 2, | |
30abcfb6 RK |
40 | series : { |
41 | 'parabola': { | |
42 | strokeWidth: 0.0, | |
43 | drawPoints: true, | |
44 | pointSize: 4, | |
45 | highlightCircleSize: 6 | |
46 | }, | |
47 | 'line': { | |
48 | strokeWidth: 1.0, | |
49 | drawPoints: true, | |
50 | pointSize: 1.5 | |
51 | }, | |
52 | 'sine wave': { | |
53 | strokeWidth: 3, | |
54 | highlightCircleSize: 10 | |
55 | }, | |
56 | 'sine wave2': { | |
57 | strokePattern: [10, 2, 5, 2], | |
58 | strokeWidth: 2, | |
59 | highlightCircleSize: 3 | |
60 | } | |
61 | } | |
62 | } | |
63 | ); | |
64 | g2 = new Dygraph( | |
65 | document.getElementById("demodiv2"), | |
66 | data, | |
67 | { | |
68 | legend: 'always', | |
69 | strokeWidth: 2, | |
27fd63fc DV |
70 | series: { |
71 | 'parabola': { | |
72 | strokePattern: null, | |
73 | drawPoints: true, | |
74 | pointSize: 4, | |
75 | highlightCircleSize: 6 | |
76 | }, | |
77 | 'line': { | |
78 | strokePattern: Dygraph.DASHED_LINE, | |
79 | strokeWidth: 1.0, | |
80 | drawPoints: true, | |
81 | pointSize: 1.5 | |
82 | }, | |
83 | 'another line': { | |
84 | strokePattern: [25, 5] | |
85 | }, | |
86 | 'sine wave': { | |
87 | strokePattern: Dygraph.DOTTED_LINE, | |
88 | strokeWidth: 3, | |
89 | highlightCircleSize: 10 | |
90 | }, | |
91 | 'sine wave2': { | |
92 | strokePattern: Dygraph.DOT_DASH_LINE, | |
93 | strokeWidth: 2, | |
94 | highlightCircleSize: 3 | |
95 | } | |
79253bd0 | 96 | } |
97 | } | |
98 | ); | |
30abcfb6 RK |
99 | g3 = new Dygraph( |
100 | document.getElementById("demodiv3"), | |
79253bd0 | 101 | data, |
102 | { | |
79253bd0 | 103 | strokeWidth: 2, |
27fd63fc DV |
104 | series: { |
105 | 'parabola': { | |
106 | strokeWidth: 0.0, | |
107 | drawPoints: true, | |
108 | pointSize: 4, | |
109 | highlightCircleSize: 6 | |
110 | }, | |
111 | 'line': { | |
112 | strokeWidth: 1.0, | |
113 | drawPoints: true, | |
114 | pointSize: 1.5 | |
115 | }, | |
116 | 'sine wave': { | |
117 | strokeWidth: 3, | |
118 | highlightCircleSize: 10 | |
119 | }, | |
120 | 'sine wave2': { | |
121 | strokePattern: [10, 2, 5, 2], | |
122 | strokeWidth: 2, | |
123 | highlightCircleSize: 3 | |
124 | } | |
46dde5f9 DV |
125 | } |
126 | } | |
127 | ); | |
79253bd0 | 128 | |
46dde5f9 DV |
129 | </script> |
130 | </body> | |
131 | </html> |