Merge branch 'master' of github.com:danvk/dygraphs
[dygraphs.git] / tests / per-series.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>Per-Series Properties</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 </head>
16 <body>
17 <h2>Chart with per-series properties</h2>
18 <div id="demodiv"></div>
19 <h2>Chart with per-series properties with legend.</h2>
20 <div id="demodiv2"></div>
21 <script type="text/javascript">
22 data = function() {
23 var zp = function(x) { if (x < 10) return "0"+x; else return x; };
24 var r = "date,parabola,line,another line,sine wave,sine wave2\n";
25 for (var i=1; i<=31; i++) {
26 r += "200610" + zp(i);
27 r += "," + 10*(i*(31-i));
28 r += "," + 10*(8*i);
29 r += "," + 10*(250 - 8*i);
30 r += "," + 10*(125 + 125 * Math.sin(0.3*i));
31 r += "," + 10*(125 + 125 * Math.sin(0.3*i+Math.PI));
32 r += "\n";
33 }
34 return r;
35 };
36 g = new Dygraph(
37 document.getElementById("demodiv"),
38 data,
39 {
40 strokeWidth: 2,
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 g2 = new Dygraph(
64 document.getElementById("demodiv2"),
65 data,
66 {
67 legend: 'always',
68 strokeWidth: 2,
69 'parabola': {
70 strokePattern: null,
71 drawPoints: true,
72 pointSize: 4,
73 highlightCircleSize: 6
74 },
75 'line': {
76 strokePattern: Dygraph.DASHED_LINE,
77 strokeWidth: 1.0,
78 drawPoints: true,
79 pointSize: 1.5
80 },
81 'another line': {
82 strokePattern: [25, 5]
83 },
84 'sine wave': {
85 strokePattern: Dygraph.DOTTED_LINE,
86 strokeWidth: 3,
87 highlightCircleSize: 10
88 },
89 'sine wave2': {
90 strokePattern: Dygraph.DOT_DASH_LINE,
91 strokeWidth: 2,
92 highlightCircleSize: 3
93 }
94 }
95 );
96
97 </script>
98 </body>
99 </html>