Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

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