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 
            var chart;
12 
 
13 
            var chartData = [
14 
                {
15 
                    "year": 1995,
16 
                    "cars": 1567,
17 
                    "motorcycles": 683,
18 
                    "bicycles": 146
19 
                },
20 
                {
21 
                    "year": 1996,
22 
                    "cars": 1617,
23 
                    "motorcycles": 691,
24 
                    "bicycles": 138
25 
                },
26 
                {
27 
                    "year": 1997,
28 
                    "cars": 1630,
29 
                    "motorcycles": 642,
30 
                    "bicycles": 127
31 
                },
32 
                {
33 
                    "year": 1998,
34 
                    "cars": 1660,
35 
                    "motorcycles": 699,
36 
                    "bicycles": 105
37 
                },
38 
                {
39 
                    "year": 1999,
40 
                    "cars": 1683,
41 
                    "motorcycles": 721,
42 
                    "bicycles": 109
43 
                },
44 
                {
45 
                    "year": 2000,
46 
                    "cars": 1691,
47 
                    "motorcycles": 737,
48 
                    "bicycles": 112
49 
                },
50 
                {
51 
                    "year": 2001,
52 
                    "cars": 1298,
53 
                    "motorcycles": 680,
54 
                    "bicycles": 101
55 
                },
56 
                {
57 
                    "year": 2002,
58 
                    "cars": 1275,
59 
                    "motorcycles": 664,
60 
                    "bicycles": 97
61 
                },
62 
                {
63 
                    "year": 2003,
64 
                    "cars": 1246,
65 
                    "motorcycles": 648,
66 
                    "bicycles": 93
67 
                },
68 
                {
69 
                    "year": 2004,
70 
                    "cars": 1218,
71 
                    "motorcycles": 637,
72 
                    "bicycles": 101
73 
                },
74 
                {
75 
                    "year": 2005,
76 
                    "cars": 1213,
77 
                    "motorcycles": 633,
78 
                    "bicycles": 87
79 
                },
80 
                {
81 
                    "year": 2006,
82 
                    "cars": 1199,
83 
                    "motorcycles": 621,
84 
                    "bicycles": 79
85 
                },
86 
                {
87 
                    "year": 2007,
88 
                    "cars": 1110,
89 
                    "motorcycles": 210,
90 
                    "bicycles": 81
91 
                },
92 
                {
93 
                    "year": 2008,
94 
                    "cars": 1165,
95 
                    "motorcycles": 232,
96 
                    "bicycles": 75
97 
                },
98 
                {
99 
                    "year": 2009,
100 
                    "cars": 1145,
101 
                    "motorcycles": 219,
102 
                    "bicycles": 88
103 
                },
104 
                {
105 
                    "year": 2010,
106 
                    "cars": 1163,
107 
                    "motorcycles": 201,
108 
                    "bicycles": 82
109 
                },
110 
                {
111 
                    "year": 2011,
112 
                    "cars": 1180,
113 
                    "motorcycles": 285,
114 
                    "bicycles": 87
115 
                },
116 
                {
117 
                    "year": 2012,
118 
                    "cars": 1159,
119 
                    "motorcycles": 277,
120 
                    "bicycles": 71
121 
                }
122 
            ];
123 
 
124 
            AmCharts.ready(function () {
125 
                // SERIAL CHART
126 
                chart = new AmCharts.AmSerialChart();
127 
 
128 
                chart.dataProvider = chartData;
129 
                chart.marginTop = 10;
130 
                chart.categoryField = "year";
131 
 
132 
                // AXES
133 
                // Category
134 
                var categoryAxis = chart.categoryAxis;
135 
                categoryAxis.gridAlpha = 0.07;
136 
                categoryAxis.axisColor = "#DADADA";
137 
                categoryAxis.startOnAxis = true;
138 
 
139 
                // Value
140 
                var valueAxis = new AmCharts.ValueAxis();
141 
                valueAxis.stackType = "regular"; // this line makes the chart "stacked"
142 
                valueAxis.gridAlpha = 0.07;
143 
                valueAxis.title = "Traffic incidents";
144 
                chart.addValueAxis(valueAxis);
145 
 
146 
                // GUIDES are vertical (can also be horizontal) lines (or areas) marking some event.
147 
                // first guide
148 
                var guide1 = new AmCharts.Guide();
149 
                guide1.category = "2001";
150 
                guide1.lineColor = "#CC0000";
151 
                guide1.lineAlpha = 1;
152 
                guide1.dashLength = 2;
153 
                guide1.inside = true;
154 
                guide1.labelRotation = 90;
155 
                guide1.label = "fines for speeding increased";
156 
                categoryAxis.addGuide(guide1);
157 
 
158 
                // second guide
159 
                var guide2 = new AmCharts.Guide();
160 
                guide2.category = "2007";
161 
                guide2.lineColor = "#CC0000";
162 
                guide2.lineAlpha = 1;
163 
                guide2.dashLength = 2;
164 
                guide2.inside = true;
165 
                guide2.labelRotation = 90;
166 
                guide2.label = "motorcycle maintenance fee introduced";
167 
                categoryAxis.addGuide(guide2);
168 
 
169 
 
170 
                // GRAPHS
171 
                // first graph
172 
                var graph = new AmCharts.AmGraph();
173 
                graph.type = "line"; // it's simple line graph
174 
                graph.title = "Cars";
175 
                graph.valueField = "cars";
176 
                graph.lineAlpha = 0;
177 
                graph.fillAlphas = 0.6; // setting fillAlphas to > 0 value makes it area graph
178 
                graph.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>";
179 
                graph.hidden = true;
180 
                chart.addGraph(graph);
181 
 
182 
                // second graph
183 
                graph = new AmCharts.AmGraph();
184 
                graph.type = "line";
185 
                graph.title = "Motorcycles";
186 
                graph.valueField = "motorcycles";
187 
                graph.lineAlpha = 0;
188 
                graph.fillAlphas = 0.6;
189 
                graph.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>";
190 
                chart.addGraph(graph);
191 
 
192 
                // third graph
193 
                graph = new AmCharts.AmGraph();
194 
                graph.type = "line";
195 
                graph.title = "Bicycles";
196 
                graph.valueField = "bicycles";
197 
                graph.lineAlpha = 0;
198 
                graph.fillAlphas = 0.6;
199 
                graph.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>";
200 
                chart.addGraph(graph);
201 
 
202 
                // LEGEND
203 
                var legend = new AmCharts.AmLegend();
204 
                legend.position = "top";
205 
                legend.valueText = "[[value]]";
206 
                legend.valueWidth = 100;
207 
                legend.valueAlign = "left";
208 
                legend.equalWidths = false;
209 
                legend.periodValueText = "total: [[value.sum]]"; // this is displayed when mouse is not over the chart.
210 
                chart.addLegend(legend);
211 
 
212 
                // CURSOR
213 
                var chartCursor = new AmCharts.ChartCursor();
214 
                chartCursor.cursorAlpha = 0;
215 
                chart.addChartCursor(chartCursor);
216 
 
217 
                // SCROLLBAR
218 
                var chartScrollbar = new AmCharts.ChartScrollbar();
219 
                chartScrollbar.color = "#FFFFFF";
220 
                chart.addChartScrollbar(chartScrollbar);
221 
 
222 
                // WRITE
223 
                chart.write("chartdiv");
224 
            });
225 
        </script>
226 
    </head>
227 
 
228 
    <body>
229 
        <div id="chartdiv" style="width:100%; height:400px;"></div>
230 
    </body>
231 
 
232 
</html>