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/pie.js" type="text/javascript"></script>
10 
 
11 
        <script>
12 
            var chart;
13 
            var legend;
14 
 
15 
            var chartData = [
16 
                {
17 
                    "country": "Czech Republic",
18 
                    "litres": 156.9
19 
                },
20 
                {
21 
                    "country": "Ireland",
22 
                    "litres": 131.1
23 
                },
24 
                {
25 
                    "country": "Germany",
26 
                    "litres": 115.8
27 
                },
28 
                {
29 
                    "country": "Australia",
30 
                    "litres": 109.9
31 
                },
32 
                {
33 
                    "country": "Austria",
34 
                    "litres": 108.3
35 
                },
36 
                {
37 
                    "country": "UK",
38 
                    "litres": 65
39 
                },
40 
                {
41 
                    "country": "Belgium",
42 
                    "litres": 50
43 
                }
44 
            ];
45 
 
46 
            AmCharts.ready(function () {
47 
                // PIE CHART
48 
                chart = new AmCharts.AmPieChart();
49 
                chart.dataProvider = chartData;
50 
                chart.titleField = "country";
51 
                chart.valueField = "litres";
52 
                chart.gradientRatio = [0, 0, 0 ,-0.2, -0.4];
53 
                chart.gradientType = "radial";
54 
 
55 
                // LEGEND
56 
                legend = new AmCharts.AmLegend();
57 
                legend.align = "center";
58 
                legend.markerType = "circle";
59 
                chart.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
60 
                chart.addLegend(legend);
61 
 
62 
                // WRITE
63 
                chart.write("chartdiv");
64 
            });
65 
 
66 
            // changes label position (labelRadius)
67 
            function setLabelPosition() {
68 
                if (document.getElementById("rb1").checked) {
69 
                    chart.labelRadius = 30;
70 
                    chart.labelText = "[[title]]: [[value]]";
71 
                } else {
72 
                    chart.labelRadius = -30;
73 
                    chart.labelText = "[[percents]]%";
74 
                }
75 
                chart.validateNow();
76 
            }
77 
 
78 
 
79 
            // makes chart 2D/3D
80 
            function set3D() {
81 
                if (document.getElementById("rb3").checked) {
82 
                    chart.depth3D = 10;
83 
                    chart.angle = 10;
84 
                } else {
85 
                    chart.depth3D = 0;
86 
                    chart.angle = 0;
87 
                }
88 
                chart.validateNow();
89 
            }
90 
 
91 
            // changes switch of the legend (x or v)
92 
            function setSwitch() {
93 
                if (document.getElementById("rb5").checked) {
94 
                    legend.switchType = "x";
95 
                } else {
96 
                    legend.switchType = "v";
97 
                }
98 
                legend.validateNow();
99 
            }
100 
        </script>
101 
    </head>
102 
 
103 
    <body>
104 
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
105 
        <table align="center" cellspacing="20">
106 
            <tr>
107 
                <td>
108 
                    <input type="radio" checked="true" name="group" id="rb1" onclick="setLabelPosition()">labels outside
109 
                    <input type="radio" name="group" id="rb2" onclick="setLabelPosition()">labels inside</td>
110 
                <td>
111 
                    <input type="radio" name="group2" id="rb3" onclick="set3D()">3D
112 
                    <input type="radio" checked="true" name="group2" id="rb4" onclick="set3D()">2D</td>
113 
                <td>Legend switch type:
114 
                    <input type="radio" checked="true" name="group3" id="rb5"
115 
                    onclick="setSwitch()">x
116 
                    <input type="radio" name="group3" id="rb6" onclick="setSwitch()">v</td>
117 
            </tr>
118 
        </table>
119 
    </body>
120 
 
121 
</html>