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 
                    "date": "2012-01-01",
17 
                    "value": 8
18 
                },
19 
                {
20 
                    "date": "2012-01-01",
21 
                    "value": 8
22 
                },
23 
                {
24 
                    "date": "2012-01-02",
25 
                    "value": 10
26 
                },
27 
                {
28 
                    "date": "2012-01-03",
29 
                    "value": 12
30 
                },
31 
                {
32 
                    "date": "2012-01-04",
33 
                    "value": 14
34 
                },
35 
                {
36 
                    "date": "2012-01-05",
37 
                    "value": 11
38 
                },
39 
                {
40 
                    "date": "2012-01-06",
41 
                    "value": 6
42 
                },
43 
                {
44 
                    "date": "2012-01-07",
45 
                    "value": 7
46 
                },
47 
                {
48 
                    "date": "2012-01-08",
49 
                    "value": 9
50 
                },
51 
                {
52 
                    "date": "2012-01-09",
53 
                    "value": 13
54 
                },
55 
                {
56 
                    "date": "2012-01-10",
57 
                    "value": 15
58 
                },
59 
                {
60 
                    "date": "2012-01-11",
61 
                    "value": 19
62 
                },
63 
                {
64 
                    "date": "2012-01-12",
65 
                    "value": 21
66 
                },
67 
                {
68 
                    "date": "2012-01-13",
69 
                    "value": 22
70 
                },
71 
                {
72 
                    "date": "2012-01-14",
73 
                    "value": 20
74 
                },
75 
                {
76 
                    "date": "2012-01-15",
77 
                    "value": 18
78 
                },
79 
                {
80 
                    "date": "2012-01-16",
81 
                    "value": 14
82 
                },
83 
                {
84 
                    "date": "2012-01-17",
85 
                    "value": 16
86 
                },
87 
                {
88 
                    "date": "2012-01-18",
89 
                    "value": 18
90 
                },
91 
                {
92 
                    "date": "2012-01-19",
93 
                    "value": 17
94 
                },
95 
                {
96 
                    "date": "2012-01-20",
97 
                    "value": 15
98 
                },
99 
                {
100 
                    "date": "2012-01-21",
101 
                    "value": 12
102 
                },
103 
                {
104 
                    "date": "2012-01-22",
105 
                    "value": 10
106 
                },
107 
                {
108 
                    "date": "2012-01-23",
109 
                    "value": 8
110 
                }
111 
            ];
112 
 
113 
 
114 
            AmCharts.ready(function () {
115 
                // SERIAL CHART
116 
                chart = new AmCharts.AmSerialChart();
117 
 
118 
                chart.dataProvider = chartData;
119 
                chart.dataDateFormat = "YYYY-MM-DD";
120 
                chart.categoryField = "date";
121 
 
122 
 
123 
                // AXES
124 
                // category
125 
                var categoryAxis = chart.categoryAxis;
126 
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
127 
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
128 
                categoryAxis.gridAlpha = 0.1;
129 
                categoryAxis.minorGridAlpha = 0.1;
130 
                categoryAxis.axisAlpha = 0;
131 
                categoryAxis.minorGridEnabled = true;
132 
                categoryAxis.inside = true;
133 
 
134 
                // value
135 
                var valueAxis = new AmCharts.ValueAxis();
136 
                valueAxis.tickLength = 0;
137 
                valueAxis.axisAlpha = 0;
138 
                valueAxis.showFirstLabel = false;
139 
                valueAxis.showLastLabel = false;
140 
                chart.addValueAxis(valueAxis);
141 
 
142 
                // GRAPH
143 
                var graph = new AmCharts.AmGraph();
144 
                graph.dashLength = 3;
145 
                graph.lineColor = "#00CC00";
146 
                graph.valueField = "value";
147 
                graph.dashLength = 3;
148 
                graph.bullet = "round";
149 
                graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>";
150 
                chart.addGraph(graph);
151 
 
152 
                // CURSOR
153 
                var chartCursor = new AmCharts.ChartCursor();
154 
                chartCursor.valueLineEnabled = true;
155 
                chartCursor.valueLineBalloonEnabled = true;
156 
                chart.addChartCursor(chartCursor);
157 
 
158 
                // SCROLLBAR
159 
                var chartScrollbar = new AmCharts.ChartScrollbar();
160 
                chart.addChartScrollbar(chartScrollbar);
161 
 
162 
                // HORIZONTAL GREEN RANGE
163 
                var guide = new AmCharts.Guide();
164 
                guide.value = 10;
165 
                guide.toValue = 20;
166 
                guide.fillColor = "#00CC00";
167 
                guide.inside = true;
168 
                guide.fillAlpha = 0.2;
169 
                guide.lineAlpha = 0;
170 
                valueAxis.addGuide(guide);
171 
 
172 
                // TREND LINES
173 
                // first trend line
174 
                var trendLine = new AmCharts.TrendLine();
175 
                // note,when creating date objects 0 month is January, as months are zero based in JavaScript.
176 
                trendLine.initialDate = new Date(2012, 0, 2, 12); // 12 is hour - to start trend line in the middle of the day
177 
                trendLine.finalDate = new Date(2012, 0, 11, 12);
178 
                trendLine.initialValue = 10;
179 
                trendLine.finalValue = 19;
180 
                trendLine.lineColor = "#CC0000";
181 
                chart.addTrendLine(trendLine);
182 
 
183 
                // second trend line
184 
                trendLine = new AmCharts.TrendLine();
185 
                trendLine.initialDate = new Date(2012, 0, 17, 12);
186 
                trendLine.finalDate = new Date(2012, 0, 22, 12);
187 
                trendLine.initialValue = 16;
188 
                trendLine.finalValue = 10;
189 
                trendLine.lineColor = "#CC0000";
190 
                chart.addTrendLine(trendLine);
191 
 
192 
                // WRITE
193 
                chart.write("chartdiv");
194 
            });
195 
        </script>
196 
    </head>
197 
 
198 
    <body>
199 
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
200 
    </body>
201 
 
202 
</html>