Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
776 lars 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 
<html>
3 
 
4 
    <head>
5 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7 
        <title>amCharts Responsive Example</title>
8 
        <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
9 
        <script src="http://www.amcharts.com/lib/3/serial.js"></script>
10 
        <script src="../responsive.min.js"></script>
11 
        <style>
12 
            body,
13 
            html {
14 
                height: 100%;
15 
                padding: 0;
16 
                margin: 0;
17 
            }
18 
        </style>
19 
        <script>
20 
            var chartData = [
21 
            {
22 
                "year": 2000,
23 
                "cars": 1587,
24 
                "motorcycles": 650,
25 
                "bicycles": 121
26 
            },
27 
            {
28 
                "year": 1995,
29 
                "cars": 1567,
30 
                "motorcycles": 683,
31 
                "bicycles": 146
32 
            },
33 
            {
34 
                "year": 1996,
35 
                "cars": 1617,
36 
                "motorcycles": 691,
37 
                "bicycles": 138
38 
            },
39 
            {
40 
                "year": 1997,
41 
                "cars": 1630,
42 
                "motorcycles": 642,
43 
                "bicycles": 127
44 
            },
45 
            {
46 
                "year": 1998,
47 
                "cars": 1660,
48 
                "motorcycles": 699,
49 
                "bicycles": 105
50 
            },
51 
            {
52 
                "year": 1999,
53 
                "cars": 1683,
54 
                "motorcycles": 721,
55 
                "bicycles": 109
56 
            },
57 
            {
58 
                "year": 2000,
59 
                "cars": 1691,
60 
                "motorcycles": 737,
61 
                "bicycles": 112
62 
            },
63 
            {
64 
                "year": 2001,
65 
                "cars": 1298,
66 
                "motorcycles": 680,
67 
                "bicycles": 101
68 
            },
69 
            {
70 
                "year": 2002,
71 
                "cars": 1275,
72 
                "motorcycles": 664,
73 
                "bicycles": 97
74 
            },
75 
            {
76 
                "year": 2003,
77 
                "cars": 1246,
78 
                "motorcycles": 648,
79 
                "bicycles": 93
80 
            },
81 
            {
82 
                "year": 2004,
83 
                "cars": 1218,
84 
                "motorcycles": 637,
85 
                "bicycles": 101
86 
            },
87 
            {
88 
                "year": 2005,
89 
                "cars": 1213,
90 
                "motorcycles": 633,
91 
                "bicycles": 87
92 
            },
93 
            {
94 
                "year": 2006,
95 
                "cars": 1199,
96 
                "motorcycles": 621,
97 
                "bicycles": 79
98 
            },
99 
            {
100 
                "year": 2007,
101 
                "cars": 1110,
102 
                "motorcycles": 210,
103 
                "bicycles": 81
104 
            },
105 
            {
106 
                "year": 2008,
107 
                "cars": 1165,
108 
                "motorcycles": 232,
109 
                "bicycles": 75
110 
            },
111 
            {
112 
                "year": 2009,
113 
                "cars": 1145,
114 
                "motorcycles": 219,
115 
                "bicycles": 88
116 
            },
117 
            {
118 
                "year": 2010,
119 
                "cars": 1163,
120 
                "motorcycles": 201,
121 
                "bicycles": 82
122 
            },
123 
            {
124 
                "year": 2011,
125 
                "cars": 1180,
126 
                "motorcycles": 285,
127 
                "bicycles": 87
128 
            },
129 
            {
130 
                "year": 2012,
131 
                "cars": 1159,
132 
                "motorcycles": 277,
133 
                "bicycles": 71
134 
            }];
135 
            AmCharts.makeChart("chartdiv",
136 
            {
137 
                "type": "serial",
138 
                "dataProvider": chartData,
139 
                "rotate": false,
140 
                "marginTop": 10,
141 
                "categoryField": "year",
142 
                "categoryAxis":
143 
                {
144 
                    "gridAlpha": 0.07,
145 
                    "axisColor": "#DADADA",
146 
                    "startOnAxis": true,
147 
                    "title": "Year",
148 
                    "guides": [
149 
                    {
150 
                        "category": "2001",
151 
                        "lineColor": "#CC0000",
152 
                        "lineAlpha": 1,
153 
                        "dashLength": 2,
154 
                        "inside": true,
155 
                        "labelRotation": 90,
156 
                        "label": "fines for speeding increased"
157 
                    },
158 
                    {
159 
                        "category": "2007",
160 
                        "lineColor": "#CC0000",
161 
                        "lineAlpha": 1,
162 
                        "dashLength": 2,
163 
                        "inside": true,
164 
                        "labelRotation": 90,
165 
                        "label": "motorcycle fee introduced"
166 
                    }]
167 
                },
168 
                "valueAxes": [
169 
                {
170 
                    "stackType": "regular",
171 
                    "gridAlpha": 0.07,
172 
                    "title": "Traffic incidents"
173 
                }],
174 
                "graphs": [
175 
                {
176 
                    "id": "g1",
177 
                    "type": "column",
178 
                    "title": "Cars",
179 
                    "valueField": "cars",
180 
                    "bullet": "round",
181 
                    "lineAlpha": 0,
182 
                    "fillAlphas": 0.6,
183 
                    "balloonText": "<img src='images/car.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
184 
                },
185 
                {
186 
                    "id": "g2",
187 
                    "type": "column",
188 
                    "title": "Motorcycles",
189 
                    "valueField": "motorcycles",
190 
                    "lineAlpha": 0,
191 
                    "fillAlphas": 0.6,
192 
                    "balloonText": "<img src='images/motorcycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
193 
                },
194 
                {
195 
                    "id": "g3",
196 
                    "type": "column",
197 
                    "title": "Bicycles",
198 
                    "valueField": "bicycles",
199 
                    "lineAlpha": 0,
200 
                    "fillAlphas": 0.6,
201 
                    "balloonText": "<img src='images/bicycle.png' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>"
202 
                }],
203 
                "legend":
204 
                {
205 
                    "position": "bottom",
206 
                    "valueText": "[[value]]",
207 
                    "valueWidth": 100,
208 
                    "valueAlign": "left",
209 
                    "equalWidths": false,
210 
                    "periodValueText": "total: [[value.sum]]"
211 
                },
212 
                "chartCursor":
213 
                {
214 
                    "cursorAlpha": 0
215 
                },
216 
                "chartScrollbar":
217 
                {
218 
                    "color": "FFFFFF"
219 
                },
220 
                "responsive":
221 
                {
222 
                    "enabled": true
223 
                }
224 
            });
225 
        </script>
226 
    </head>
227 
 
228 
    <body>
229 
        <div id="chartdiv" style="width: 100%; height: 100%;"></div>
230 
    </body>
231 
 
232 
</html>