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