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 chartData = [
14 
                {
15 
                    "date": "2012-03-01",
16 
                    "price": 20
17 
                },
18 
                {
19 
                    "date": "2012-03-02",
20 
                    "price": 75
21 
                },
22 
                {
23 
                    "date": "2012-03-03",
24 
                    "price": 15
25 
                },
26 
                {
27 
                    "date": "2012-03-04",
28 
                    "price": 75
29 
                },
30 
                {
31 
                    "date": "2012-03-05",
32 
                    "price": 158
33 
                },
34 
                {
35 
                    "date": "2012-03-06",
36 
                    "price": 57
37 
                },
38 
                {
39 
                    "date": "2012-03-07",
40 
                    "price": 107
41 
                },
42 
                {
43 
                    "date": "2012-03-08",
44 
                    "price": 89
45 
                },
46 
                {
47 
                    "date": "2012-03-09",
48 
                    "price": 75
49 
                },
50 
                {
51 
                    "date": "2012-03-10",
52 
                    "price": 132
53 
                },
54 
                {
55 
                    "date": "2012-03-11",
56 
                    "price": 158
57 
                },
58 
                {
59 
                    "date": "2012-03-12",
60 
                    "price": 56
61 
                },
62 
                {
63 
                    "date": "2012-03-13",
64 
                    "price": 169
65 
                },
66 
                {
67 
                    "date": "2012-03-14",
68 
                    "price": 24
69 
                },
70 
                {
71 
                    "date": "2012-03-15",
72 
                    "price": 147
73 
                }
74 
            ];
75 
 
76 
            var average = 90.4;
77 
 
78 
            AmCharts.ready(function () {
79 
 
80 
                // SERIAL CHART
81 
                chart = new AmCharts.AmSerialChart();
82 
 
83 
                chart.dataProvider = chartData;
84 
                chart.categoryField = "date";
85 
                chart.dataDateFormat = "YYYY-MM-DD";
86 
 
87 
                // AXES
88 
                // category
89 
                var categoryAxis = chart.categoryAxis;
90 
                categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
91 
                categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
92 
                categoryAxis.dashLength = 1;
93 
                categoryAxis.gridAlpha = 0.15;
94 
                categoryAxis.axisColor = "#DADADA";
95 
 
96 
                // value
97 
                var valueAxis = new AmCharts.ValueAxis();
98 
                valueAxis.axisColor = "#DADADA";
99 
                valueAxis.dashLength = 1;
100 
                valueAxis.logarithmic = true; // this line makes axis logarithmic
101 
                chart.addValueAxis(valueAxis);
102 
 
103 
                // GUIDE for average
104 
                var guide = new AmCharts.Guide();
105 
                guide.value = average;
106 
                guide.lineColor = "#CC0000";
107 
                guide.dashLength = 4;
108 
                guide.label = "average";
109 
                guide.inside = true;
110 
                guide.lineAlpha = 1;
111 
                valueAxis.addGuide(guide);
112 
 
113 
 
114 
                // GRAPH
115 
                var graph = new AmCharts.AmGraph();
116 
                graph.type = "smoothedLine";
117 
                graph.bullet = "round";
118 
                graph.bulletColor = "#FFFFFF";
119 
                graph.useLineColorForBulletBorder = true;
120 
                graph.bulletBorderAlpha = 1;
121 
                graph.bulletBorderThickness = 2;
122 
                graph.bulletSize = 7;
123 
                graph.title = "Price";
124 
                graph.valueField = "price";
125 
                graph.lineThickness = 2;
126 
                graph.lineColor = "#00BBCC";
127 
                chart.addGraph(graph);
128 
 
129 
                // CURSOR
130 
                var chartCursor = new AmCharts.ChartCursor();
131 
                chartCursor.cursorPosition = "mouse";
132 
                chart.addChartCursor(chartCursor);
133 
 
134 
                // SCROLLBAR
135 
                var chartScrollbar = new AmCharts.ChartScrollbar();
136 
                chartScrollbar.graph = graph;
137 
                chartScrollbar.scrollbarHeight = 30;
138 
                chart.addChartScrollbar(chartScrollbar);
139 
 
140 
                chart.creditsPosition = "bottom-right";
141 
 
142 
                // WRITE
143 
                chart.write("chartdiv");
144 
            });
145 
        </script>
146 
    </head>
147 
 
148 
    <body>
149 
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
150 
    </body>
151 
 
152 
</html>