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/xy.js" type="text/javascript"></script>
10 
 
11 
        <script>
12 
            var chart;
13 
 
14 
            var chartData = [
15 
                {
16 
                    "ax": 1,
17 
                    "ay": 0.5,
18 
                    "bx": 1,
19 
                    "by": 2.2
20 
                },
21 
                {
22 
                    "ax": 2,
23 
                    "ay": 1.3,
24 
                    "bx": 2,
25 
                    "by": 4.9
26 
                },
27 
                {
28 
                    "ax": 3,
29 
                    "ay": 2.3,
30 
                    "bx": 3,
31 
                    "by": 5.1
32 
                },
33 
                {
34 
                    "ax": 4,
35 
                    "ay": 2.8,
36 
                    "bx": 4,
37 
                    "by": 5.3
38 
                },
39 
                {
40 
                    "ax": 5,
41 
                    "ay": 3.5,
42 
                    "bx": 5,
43 
                    "by": 6.1
44 
                },
45 
                {
46 
                    "ax": 6,
47 
                    "ay": 5.1,
48 
                    "bx": 6,
49 
                    "by": 8.3
50 
                },
51 
                {
52 
                    "ax": 7,
53 
                    "ay": 6.7,
54 
                    "bx": 7,
55 
                    "by": 10.5
56 
                },
57 
                {
58 
                    "ax": 8,
59 
                    "ay": 8,
60 
                    "bx": 8,
61 
                    "by": 12.3
62 
                },
63 
                {
64 
                    "ax": 9,
65 
                    "ay": 8.9,
66 
                    "bx": 9,
67 
                    "by": 14.5
68 
                },
69 
                {
70 
                    "ax": 10,
71 
                    "ay": 9.7,
72 
                    "bx": 10,
73 
                    "by": 15
74 
                },
75 
                {
76 
                    "ax": 11,
77 
                    "ay": 10.4,
78 
                    "bx": 11,
79 
                    "by": 18.8
80 
                },
81 
                {
82 
                    "ax": 12,
83 
                    "ay": 11.7,
84 
                    "bx": 12,
85 
                    "by": 19
86 
                }
87 
            ];
88 
 
89 
            AmCharts.ready(function () {
90 
                // XY CHART
91 
                chart = new AmCharts.AmXYChart();
92 
 
93 
                chart.dataProvider = chartData;
94 
                chart.startDuration = 1;
95 
 
96 
                // AXES
97 
                // X
98 
                var xAxis = new AmCharts.ValueAxis();
99 
                xAxis.title = "X Axis";
100 
                xAxis.position = "bottom";
101 
                xAxis.dashLength = 1;
102 
                xAxis.axisAlpha = 0;
103 
                xAxis.autoGridCount = true;
104 
                chart.addValueAxis(xAxis);
105 
 
106 
                // Y
107 
                var yAxis = new AmCharts.ValueAxis();
108 
                yAxis.position = "left";
109 
                yAxis.title = "Y Axis";
110 
                yAxis.dashLength = 1;
111 
                yAxis.axisAlpha = 0;
112 
                yAxis.autoGridCount = true;
113 
                chart.addValueAxis(yAxis);
114 
 
115 
                // GRAPHS
116 
                // triangles up
117 
                var graph1 = new AmCharts.AmGraph();
118 
                graph1.lineColor = "#FF6600";
119 
                graph1.balloonText = "x:[[x]] y:[[y]]";
120 
                graph1.xField = "ax";
121 
                graph1.yField = "ay";
122 
                graph1.lineAlpha = 0;
123 
                graph1.bullet = "triangleUp";
124 
                chart.addGraph(graph1);
125 
 
126 
                // triangles down
127 
                var graph2 = new AmCharts.AmGraph();
128 
                graph2.lineColor = "#FCD202";
129 
                graph2.balloonText = "x:[[x]] y:[[y]]";
130 
                graph2.xField = "bx";
131 
                graph2.yField = "by";
132 
                graph2.lineAlpha = 0;
133 
                graph2.bullet = "triangleDown";
134 
                chart.addGraph(graph2);
135 
 
136 
                // first trend line
137 
                var trendLine = new AmCharts.TrendLine();
138 
                trendLine.lineColor = "#FF6600";
139 
                trendLine.initialXValue = 1;
140 
                trendLine.initialValue = 2;
141 
                trendLine.finalXValue = 12;
142 
                trendLine.finalValue = 11;
143 
                chart.addTrendLine(trendLine);
144 
 
145 
                // second trend line
146 
                trendLine = new AmCharts.TrendLine();
147 
                trendLine.lineColor = "#FCD202";
148 
                trendLine.initialXValue = 1;
149 
                trendLine.initialValue = 1;
150 
                trendLine.finalXValue = 12;
151 
                trendLine.finalValue = 19;
152 
                chart.addTrendLine(trendLine);
153 
 
154 
                // CURSOR
155 
                var chartCursor = new AmCharts.ChartCursor();
156 
                chart.addChartCursor(chartCursor);
157 
 
158 
                // SCROLLBAR
159 
 
160 
                var chartScrollbar = new AmCharts.ChartScrollbar();
161 
                chartScrollbar.scrollbarHeight = 5;
162 
                chartScrollbar.offset = 15
163 
                chart.addChartScrollbar(chartScrollbar);
164 
 
165 
                // WRITE
166 
                chart.write("chartdiv");
167 
            });
168 
        </script>
169 
    </head>
170 
 
171 
    <body>
172 
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
173 
    </body>
174 
 
175 
</html>