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 
 
11 
        <script>
12 
            var chart;
13 
 
14 
            var chartData = [
15 
                {
16 
                    "country": "USA",
17 
                    "year2004": 3.5,
18 
                    "year2005": 4.2
19 
                },
20 
                {
21 
                    "country": "UK",
22 
                    "year2004": 1.7,
23 
                    "year2005": 3.1
24 
                },
25 
                {
26 
                    "country": "Canada",
27 
                    "year2004": 2.8,
28 
                    "year2005": 2.9
29 
                },
30 
                {
31 
                    "country": "Japan",
32 
                    "year2004": 2.6,
33 
                    "year2005": 2.3
34 
                },
35 
                {
36 
                    "country": "France",
37 
                    "year2004": 1.4,
38 
                    "year2005": 2.1
39 
                },
40 
                {
41 
                    "country": "Brazil",
42 
                    "year2004": 2.6,
43 
                    "year2005": 4.9
44 
                },
45 
                {
46 
                    "country": "Russia",
47 
                    "year2004": 6.4,
48 
                    "year2005": 7.2
49 
                },
50 
                {
51 
                    "country": "India",
52 
                    "year2004": 8,
53 
                    "year2005": 7.1
54 
                },
55 
                {
56 
                    "country": "China",
57 
                    "year2004": 9.9,
58 
                    "year2005": 10.1
59 
                }
60 
            ];
61 
 
62 
 
63 
            AmCharts.ready(function () {
64 
                // SERIAL CHART
65 
                chart = new AmCharts.AmSerialChart();
66 
                chart.dataProvider = chartData;
67 
                chart.categoryField = "country";
68 
                chart.color = "#FFFFFF";
69 
                chart.fontSize = 14;
70 
                chart.startDuration = 1;
71 
                chart.plotAreaFillAlphas = 0.2;
72 
                // the following two lines makes chart 3D
73 
                chart.angle = 30;
74 
                chart.depth3D = 60;
75 
 
76 
                // AXES
77 
                // category
78 
                var categoryAxis = chart.categoryAxis;
79 
                categoryAxis.gridAlpha = 0.2;
80 
                categoryAxis.gridPosition = "start";
81 
                categoryAxis.gridColor = "#FFFFFF";
82 
                categoryAxis.axisColor = "#FFFFFF";
83 
                categoryAxis.axisAlpha = 0.5;
84 
                categoryAxis.dashLength = 5;
85 
 
86 
                // value
87 
                var valueAxis = new AmCharts.ValueAxis();
88 
                valueAxis.stackType = "3d"; // This line makes chart 3D stacked (columns are placed one behind another)
89 
                valueAxis.gridAlpha = 0.2;
90 
                valueAxis.gridColor = "#FFFFFF";
91 
                valueAxis.axisColor = "#FFFFFF";
92 
                valueAxis.axisAlpha = 0.5;
93 
                valueAxis.dashLength = 5;
94 
                valueAxis.title = "GDP growth rate";
95 
                valueAxis.titleColor = "#FFFFFF";
96 
                valueAxis.unit = "%";
97 
                chart.addValueAxis(valueAxis);
98 
 
99 
                // GRAPHS
100 
                // first graph
101 
                var graph1 = new AmCharts.AmGraph();
102 
                graph1.title = "2004";
103 
                graph1.valueField = "year2004";
104 
                graph1.type = "column";
105 
                graph1.lineAlpha = 0;
106 
                graph1.lineColor = "#D2CB00";
107 
                graph1.fillAlphas = 1;
108 
                graph1.balloonText = "GDP grow in [[category]] (2004): <b>[[value]]</b>";
109 
                chart.addGraph(graph1);
110 
 
111 
                // second graph
112 
                var graph2 = new AmCharts.AmGraph();
113 
                graph2.title = "2005";
114 
                graph2.valueField = "year2005";
115 
                graph2.type = "column";
116 
                graph2.lineAlpha = 0;
117 
                graph2.lineColor = "#BEDF66";
118 
                graph2.fillAlphas = 1;
119 
                graph2.balloonText = "GDP grow in [[category]] (2005): <b>[[value]]</b>";
120 
                chart.addGraph(graph2);
121 
 
122 
                chart.write("chartdiv");
123 
            });
124 
        </script>
125 
    </head>
126 
 
127 
    <body style="background-color:#000000;">
128 
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
129 
    </body>
130 
 
131 
</html>