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.categoryField = "year";
130 
 
131 
                chart.addTitle("Traffic incidents per year", 15);
132 
 
133 
                // AXES
134 
                // Category
135 
                var categoryAxis = chart.categoryAxis;
136 
                categoryAxis.gridAlpha = 0.07;
137 
                categoryAxis.axisColor = "#DADADA";
138 
                categoryAxis.startOnAxis = true;
139 
 
140 
                // Value
141 
                var valueAxis = new AmCharts.ValueAxis();
142 
                valueAxis.title = "percent"; // this line makes the chart "stacked"
143 
                valueAxis.stackType = "100%";
144 
                valueAxis.gridAlpha = 0.07;
145 
                chart.addValueAxis(valueAxis);
146 
 
147 
                // GRAPHS
148 
                // first graph
149 
                var graph = new AmCharts.AmGraph();
150 
                graph.type = "line"; // it's simple line graph
151 
                graph.title = "Cars";
152 
                graph.valueField = "cars";
153 
                graph.lineAlpha = 0;
154 
                graph.fillAlphas = 0.6; // setting fillAlphas to > 0 value makes it area graph
155 
                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>";
156 
                chart.addGraph(graph);
157 
 
158 
                // second graph
159 
                graph = new AmCharts.AmGraph();
160 
                graph.type = "line";
161 
                graph.title = "Motorcycles";
162 
                graph.valueField = "motorcycles";
163 
                graph.lineAlpha = 0;
164 
                graph.fillAlphas = 0.6;
165 
                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>";
166 
                chart.addGraph(graph);
167 
 
168 
                // third graph
169 
                graph = new AmCharts.AmGraph();
170 
                graph.type = "line";
171 
                graph.title = "Bicycles";
172 
                graph.valueField = "bicycles";
173 
                graph.lineAlpha = 0;
174 
                graph.fillAlphas = 0.6;
175 
                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>";
176 
                chart.addGraph(graph);
177 
 
178 
                // LEGEND
179 
                var legend = new AmCharts.AmLegend();
180 
                legend.align = "center";
181 
                legend.valueText = "[[value]] ([[percents]]%)";
182 
                legend.valueWidth = 100;
183 
                legend.valueAlign = "left";
184 
                legend.equalWidths = false;
185 
                legend.periodValueText = "total: [[value.sum]]"; // this is displayed when mouse is not over the chart.
186 
                chart.addLegend(legend);
187 
 
188 
                // CURSOR
189 
                var chartCursor = new AmCharts.ChartCursor();
190 
                chartCursor.zoomable = false; // as the chart displayes not too many values, we disabled zooming
191 
                chartCursor.cursorAlpha = 0;
192 
                chartCursor.valueZoomable = true;
193 
                chartCursor.pan = true;
194 
                chart.addChartCursor(chartCursor);
195 
 
196 
                //  VALUE SCROLLBAR
197 
                chart.valueScrollbar = new AmCharts.ChartScrollbar();
198 
 
199 
                // WRITE
200 
                chart.write("chartdiv");
201 
            });
202 
        </script>
203 
    </head>
204 
 
205 
    <body>
206 
        <div id="chartdiv" style="width:100%; height:400px;"></div>
207 
    </body>
208 
 
209 
</html>