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 
            // since v3, chart can accept data in JSON format
13 
            // if your category axis parses dates, you should only
14 
            // set date format of your data (dataDateFormat property of AmSerialChart)
15 
            var chartData = [
16 
                {
17 
                    "date": "2009-10-02",
18 
                    "value": 5
19 
                },
20 
                {
21 
                    "date": "2009-10-03",
22 
                    "value": 15
23 
                },
24 
                {
25 
                    "date": "2009-10-04",
26 
                    "value": 13
27 
                },
28 
                {
29 
                    "date": "2009-10-05",
30 
                    "value": 17
31 
                },
32 
                {
33 
                    "date": "2009-10-06",
34 
                    "value": 15
35 
                },
36 
                {
37 
                    "date": "2009-10-09",
38 
                    "value": 19
39 
                },
40 
                {
41 
                    "date": "2009-10-10",
42 
                    "value": 21
43 
                },
44 
                {
45 
                    "date": "2009-10-11",
46 
                    "value": 20
47 
                },
48 
                {
49 
                    "date": "2009-10-12",
50 
                    "value": 20
51 
                },
52 
                {
53 
                    "date": "2009-10-13",
54 
                    "value": 19
55 
                },
56 
                {
57 
                    "date": "2009-10-16",
58 
                    "value": 25
59 
                },
60 
                {
61 
                    "date": "2009-10-17",
62 
                    "value": 24
63 
                },
64 
                {
65 
                    "date": "2009-10-18",
66 
                    "value": 26
67 
                },
68 
                {
69 
                    "date": "2009-10-19",
70 
                    "value": 27
71 
                },
72 
                {
73 
                    "date": "2009-10-20",
74 
                    "value": 25
75 
                },
76 
                {
77 
                    "date": "2009-10-23",
78 
                    "value": 29
79 
                },
80 
                {
81 
                    "date": "2009-10-24",
82 
                    "value": 28
83 
                },
84 
                {
85 
                    "date": "2009-10-25",
86 
                    "value": 30
87 
                },
88 
                {
89 
                    "date": "2009-10-26",
90 
                    "value": 72
91 
                },
92 
                {
93 
                    "date": "2009-10-27",
94 
                    "value": 43
95 
                },
96 
                {
97 
                    "date": "2009-10-30",
98 
                    "value": 31
99 
                },
100 
                {
101 
                    "date": "2009-11-01",
102 
                    "value": 30
103 
                },
104 
                {
105 
                    "date": "2009-11-02",
106 
                    "value": 29
107 
                },
108 
                {
109 
                    "date": "2009-11-03",
110 
                    "value": 27
111 
                },
112 
                {
113 
                    "date": "2009-11-04",
114 
                    "value": 26
115 
                }
116 
            ];
117 
 
118 
            createFromToFields();
119 
 
120 
            // create from/to field values programatically
121 
            function createFromToFields(){
122 
                for(var i = 0; i < chartData.length; i++){
123 
                    var value = chartData[i].value;
124 
                    chartData[i].fromValue = value - value * 0.2;
125 
                    chartData[i].toValue = value + value * 0.2;
126 
                }
127 
            }
128 
 
129 
 
130 
            AmCharts.ready(function () {
131 
                var chart = new AmCharts.AmSerialChart();
132 
                chart.dataProvider = chartData;
133 
 
134 
                chart.categoryField = "date";
135 
                chart.dataDateFormat = "YYYY-MM-DD";
136 
 
137 
                // AXES
138 
                // category
139 
                var categoryAxis = chart.categoryAxis;
140 
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
141 
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
142 
                categoryAxis.gridAlpha = 0;
143 
                categoryAxis.tickLength = 0;
144 
                categoryAxis.axisAlpha = 0;
145 
 
146 
                // value
147 
                var valueAxis = new AmCharts.ValueAxis();
148 
                valueAxis.dashLength = 4;
149 
                valueAxis.axisAlpha = 0;
150 
                chart.addValueAxis(valueAxis);
151 
 
152 
 
153 
                // FROM GRAPH
154 
                var fromGraph = new AmCharts.AmGraph();
155 
                fromGraph.type = "line";
156 
                fromGraph.valueField = "fromValue";
157 
                fromGraph.lineAlpha = 0;
158 
                fromGraph.showBalloon = false;
159 
                chart.addGraph(fromGraph);
160 
 
161 
                // TO GRAPH
162 
                var toGraph = new AmCharts.AmGraph();
163 
                toGraph.type = "line";
164 
                toGraph.valueField = "toValue";
165 
                toGraph.lineAlpha = 0;
166 
                toGraph.fillAlphas = 0.2;
167 
                toGraph.fillToGraph = fromGraph;
168 
                toGraph.showBalloon = false;
169 
                chart.addGraph(toGraph);
170 
 
171 
 
172 
                // GRAPH
173 
                var graph = new AmCharts.AmGraph();
174 
                graph.type = "line";
175 
                graph.valueField = "value";
176 
                graph.lineColor = "#000000";
177 
                chart.addGraph(graph);
178 
 
179 
                // CURSOR
180 
                var chartCursor = new AmCharts.ChartCursor();
181 
                chart.addChartCursor(chartCursor);
182 
 
183 
                chart.creditsPosition = "top-right";
184 
 
185 
                // WRITE
186 
                chart.write("chartdiv");
187 
            });
188 
        </script>
189 
    </head>
190 
 
191 
    <body>
192 
        <div id="chartdiv" style="width:100%; height:400px;"></div>
193 
    </body>
194 
 
195 
</html>