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