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 
           var graph;
14 
 
15 
           var chartData = [
16 
                {
17 
                    "year": "1950",
18 
                    "value": 0.22
19 
                },
20 
                {
21 
                    "year": "1951",
22 
                    "value": 0.168
23 
                },
24 
                {
25 
                    "year": "1952",
26 
                    "value": 0.103
27 
                },
28 
                {
29 
                    "year": "1953",
30 
                    "value": 0.067
31 
                },
32 
                {
33 
                    "year": "1954",
34 
                    "value": 0.151
35 
                },
36 
                {
37 
                    "year": "1955",
38 
                    "value": 0.281
39 
                },
40 
                {
41 
                    "year": "1956",
42 
                    "value": 0.348
43 
                },
44 
                {
45 
                    "year": "1957",
46 
                    "value": 0.274
47 
                },
48 
                {
49 
                    "year": "1958",
50 
                    "value": 0.211
51 
                },
52 
                {
53 
                    "year": "1959",
54 
                    "value": 0.174
55 
                },
56 
                {
57 
                    "year": "1960",
58 
                    "value": 0.124
59 
                },
60 
                {
61 
                    "year": "1961",
62 
                    "value": 0.064
63 
                },
64 
                {
65 
                    "year": "1962",
66 
                    "value": 0.032
67 
                },
68 
                {
69 
                    "year": "1963",
70 
                    "value": 0.05
71 
                },
72 
                {
73 
                    "year": "1964",
74 
                    "value": 0.106
75 
                }
76 
            ];
77 
 
78 
 
79 
           AmCharts.ready(function () {
80 
               // SERIAL CHART
81 
               chart = new AmCharts.AmSerialChart();
82 
 
83 
               chart.marginRight = 0;
84 
               chart.marginTop = 0;
85 
               chart.dataProvider = chartData;
86 
               chart.categoryField = "year";
87 
               chart.dataDateFormat = "YYYY";
88 
               chart.color = "#FFFFFF";
89 
 
90 
               chart.backgroundImage = "images/bgSky.jpg";
91 
 
92 
               // AXES
93 
               // Category
94 
               var categoryAxis = chart.categoryAxis;
95 
               categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
96 
               categoryAxis.minPeriod = "YYYY"; // our data is yearly, so we set minPeriod to YYYY
97 
               categoryAxis.gridCount = 20;
98 
               categoryAxis.autoGridCount = false;
99 
               categoryAxis.axisAlpha = 0.3;
100 
               categoryAxis.axisColor = "#FFFFFF";
101 
               categoryAxis.gridAlpha = 0.05;
102 
 
103 
               // VALUE
104 
               var valueAxis = new AmCharts.ValueAxis();
105 
               valueAxis.gridAlpha = 0;
106 
               valueAxis.axisAlpha = 0.3;
107 
               valueAxis.axisColor = "#FFFFFF";
108 
               valueAxis.showLastLabel = false;
109 
               chart.addValueAxis(valueAxis);
110 
 
111 
               // GRAPH
112 
               graph = new AmCharts.AmGraph();
113 
               graph.type = "step"; // this line makes step graph
114 
               graph.noStepRisers = true;
115 
               graph.valueField = "value";
116 
               graph.lineColor = "#FFFFFF";
117 
               graph.lineThickness = 1;
118 
               graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
119 
               chart.addGraph(graph);
120 
 
121 
               // CURSOR
122 
               var chartCursor = new AmCharts.ChartCursor();
123 
               chartCursor.cursorAlpha = 0;
124 
               chartCursor.cursorPosition = "mouse";
125 
               chartCursor.categoryBalloonDateFormat = "YYYY";
126 
               chart.addChartCursor(chartCursor);
127 
 
128 
               chart.creditsPosition = "top-right";
129 
 
130 
               // WRITE
131 
               chart.write("chartdiv");
132 
           });
133 
		</script>
134 
	</head>
135 
 
136 
    <body>
137 
        <div id="chartdiv" style="width: 800px; height: 500px;"></div>
138 
    </body>
139 
 
140 
</html>