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