Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 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, html {
13 
        height: 100%;
14 
        padding: 0;
15 
        margin: 0;
16 
    }
17 
    </style>
18 
    <script>
19 
      var chartData = [{
20 
        "year": 2000,
21 
        "cars": 1587,
22 
        "motorcycles": 650,
23 
        "bicycles": 121
24 
     }, {
25 
        "year": 1995,
26 
        "cars": 1567,
27 
        "motorcycles": 683,
28 
        "bicycles": 146
29 
     }, {
30 
        "year": 1996,
31 
        "cars": 1617,
32 
        "motorcycles": 691,
33 
        "bicycles": 138
34 
     }, {
35 
        "year": 1997,
36 
        "cars": 1630,
37 
        "motorcycles": 642,
38 
        "bicycles": 127
39 
     }, {
40 
        "year": 1998,
41 
        "cars": 1660,
42 
        "motorcycles": 699,
43 
        "bicycles": 105
44 
     }, {
45 
        "year": 1999,
46 
        "cars": 1683,
47 
        "motorcycles": 721,
48 
        "bicycles": 109
49 
     }, {
50 
        "year": 2000,
51 
        "cars": 1691,
52 
        "motorcycles": 737,
53 
        "bicycles": 112
54 
     }, {
55 
        "year": 2001,
56 
        "cars": 1298,
57 
        "motorcycles": 680,
58 
        "bicycles": 101
59 
     }, {
60 
        "year": 2002,
61 
        "cars": 1275,
62 
        "motorcycles": 664,
63 
        "bicycles": 97
64 
     }, {
65 
        "year": 2003,
66 
        "cars": 1246,
67 
        "motorcycles": 648,
68 
        "bicycles": 93
69 
     }, {
70 
        "year": 2004,
71 
        "cars": 1218,
72 
        "motorcycles": 637,
73 
        "bicycles": 101
74 
     }, {
75 
        "year": 2005,
76 
        "cars": 1213,
77 
        "motorcycles": 633,
78 
        "bicycles": 87
79 
     }, {
80 
        "year": 2006,
81 
        "cars": 1199,
82 
        "motorcycles": 621,
83 
        "bicycles": 79
84 
     }, {
85 
        "year": 2007,
86 
        "cars": 1110,
87 
        "motorcycles": 210,
88 
        "bicycles": 81
89 
     }, {
90 
        "year": 2008,
91 
        "cars": 1165,
92 
        "motorcycles": 232,
93 
        "bicycles": 75
94 
     }, {
95 
        "year": 2009,
96 
        "cars": 1145,
97 
        "motorcycles": 219,
98 
        "bicycles": 88
99 
     }, {
100 
        "year": 2010,
101 
        "cars": 1163,
102 
        "motorcycles": 201,
103 
        "bicycles": 82
104 
     }, {
105 
        "year": 2011,
106 
        "cars": 1180,
107 
        "motorcycles": 285,
108 
        "bicycles": 87
109 
     }, {
110 
        "year": 2012,
111 
        "cars": 1159,
112 
        "motorcycles": 277,
113 
        "bicycles": 71
114 
     }];
115 
 
116 
     AmCharts.makeChart("chartdiv", {
117 
       "type": "serial",
118 
       "dataProvider": chartData,
119 
       "rotate": false,
120 
       "marginTop": 10,
121 
       "categoryField": "year",
122 
       "categoryAxis": {
123 
         "gridAlpha": 0.07,
124 
         "axisColor": "#DADADA",
125 
         "startOnAxis": true,
126 
         "title": "Year",
127 
         "guides": [{
128 
           "category": "2001",
129 
           "lineColor": "#CC0000",
130 
           "lineAlpha": 1,
131 
           "dashLength": 2,
132 
           "inside": true,
133 
           "labelRotation": 90,
134 
           "label": "fines for speeding increased"
135 
         }, {
136 
           "category": "2007",
137 
           "lineColor": "#CC0000",
138 
           "lineAlpha": 1,
139 
           "dashLength": 2,
140 
           "inside": true,
141 
           "labelRotation": 90,
142 
           "label": "motorcycle fee introduced"
143 
         }]
144 
       },
145 
       "valueAxes": [{
146 
         "stackType": "regular",
147 
         "gridAlpha": 0.07,
148 
         "title": "Traffic incidents"
149 
       }],
150 
       "graphs": [{
151 
         "id": "g1",
152 
         "type": "column",
153 
         "title": "Cars",
154 
         "valueField": "cars",
155 
         "bullet": "round",
156 
         "lineAlpha": 0,
157 
         "fillAlphas": 0.6,
158 
         "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>"
159 
       }, {
160 
         "id": "g2",
161 
         "type": "column",
162 
         "title": "Motorcycles",
163 
         "valueField": "motorcycles",
164 
         "lineAlpha": 0,
165 
         "fillAlphas": 0.6,
166 
         "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>"
167 
       }, {
168 
         "id": "g3",
169 
         "type": "column",
170 
         "title": "Bicycles",
171 
         "valueField": "bicycles",
172 
         "lineAlpha": 0,
173 
         "fillAlphas": 0.6,
174 
         "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>"
175 
       }],
176 
       "legend": {
177 
         "position": "bottom",
178 
         "valueText": "[[value]]",
179 
         "valueWidth": 100,
180 
         "valueAlign": "left",
181 
         "equalWidths": false,
182 
         "periodValueText": "total: [[value.sum]]"
183 
       },
184 
       "chartCursor": {
185 
         "cursorAlpha": 0
186 
       },
187 
       "chartScrollbar": {
188 
         "color": "FFFFFF"
189 
       },
190 
      "responsive": {
191 
        "enabled": true
192 
      }
193 
 
194 
     });
195 
 
196 
    </script>
197 
  </head>
198 
 
199 
  <body>
200 
    <div id="chartdiv" style="width: 100%; height: 100%;"></div>
201 
  </body>
202 
 
203 
</html>