Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
776 lars 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 
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7 
        <title>amCharts Responsive Example</title>
8 
        <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
9 
        <script src="http://www.amcharts.com/lib/3/serial.js"></script>
10 
        <script src="http://www.amcharts.com/lib/3/amstock.js"></script>
11 
        <script src="../responsive.min.js"></script>
12 
        <style>
13 
            body,
14 
            html {
15 
                height: 100%;
16 
                padding: 0;
17 
                margin: 0;
18 
                font-family: Verdana;
19 
                font-size: 12px;
20 
            }
21 
        </style>
22 
        <script>
23 
            var chartData1 = [];
24 
            var chartData2 = [];
25 
            var chartData3 = [];
26 
            var chartData4 = [];
27 
            generateChartData();
28 
 
29 
            function generateChartData()
30 
            {
31 
                var firstDate = new Date();
32 
                firstDate.setDate(firstDate.getDate() - 500);
33 
                firstDate.setHours(0, 0, 0, 0);
34 
                for (var i = 0; i < 500; i++)
35 
                {
36 
                    var newDate = new Date(firstDate);
37 
                    newDate.setDate(newDate.getDate() + i);
38 
                    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
39 
                    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
40 
                    var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
41 
                    var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
42 
                    var a3 = Math.round(Math.random() * (100 + i)) + 200;
43 
                    var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
44 
                    var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
45 
                    var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
46 
                    chartData1.push(
47 
                    {
48 
                        "date": newDate,
49 
                        "value": a1,
50 
                        "volume": b1
51 
                    });
52 
                    chartData2.push(
53 
                    {
54 
                        "date": newDate,
55 
                        "value": a2,
56 
                        "volume": b2
57 
                    });
58 
                    chartData3.push(
59 
                    {
60 
                        "date": newDate,
61 
                        "value": a3,
62 
                        "volume": b3
63 
                    });
64 
                    chartData4.push(
65 
                    {
66 
                        "date": newDate,
67 
                        "value": a4,
68 
                        "volume": b4
69 
                    });
70 
                }
71 
            }
72 
            var chart = AmCharts.makeChart("chartdiv",
73 
            {
74 
                "type": "stock",
75 
                "theme": "none",
76 
                "dataSets": [
77 
                {
78 
                    "title": "first data set",
79 
                    "fieldMappings": [
80 
                    {
81 
                        "fromField": "value",
82 
                        "toField": "value"
83 
                    },
84 
                    {
85 
                        "fromField": "volume",
86 
                        "toField": "volume"
87 
                    }],
88 
                    "dataProvider": chartData1,
89 
                    "categoryField": "date"
90 
                },
91 
                {
92 
                    "title": "second data set",
93 
                    "fieldMappings": [
94 
                    {
95 
                        "fromField": "value",
96 
                        "toField": "value"
97 
                    },
98 
                    {
99 
                        "fromField": "volume",
100 
                        "toField": "volume"
101 
                    }],
102 
                    "dataProvider": chartData2,
103 
                    "categoryField": "date"
104 
                },
105 
                {
106 
                    "title": "third data set",
107 
                    "fieldMappings": [
108 
                    {
109 
                        "fromField": "value",
110 
                        "toField": "value"
111 
                    },
112 
                    {
113 
                        "fromField": "volume",
114 
                        "toField": "volume"
115 
                    }],
116 
                    "dataProvider": chartData3,
117 
                    "categoryField": "date"
118 
                },
119 
                {
120 
                    "title": "fourth data set",
121 
                    "fieldMappings": [
122 
                    {
123 
                        "fromField": "value",
124 
                        "toField": "value"
125 
                    },
126 
                    {
127 
                        "fromField": "volume",
128 
                        "toField": "volume"
129 
                    }],
130 
                    "dataProvider": chartData4,
131 
                    "categoryField": "date"
132 
                }],
133 
                "panels": [
134 
                {
135 
                    "showCategoryAxis": false,
136 
                    "title": "Value",
137 
                    "percentHeight": 70,
138 
                    "stockGraphs": [
139 
                    {
140 
                        "id": "g1",
141 
                        "valueField": "value",
142 
                        "comparable": true,
143 
                        "compareField": "value",
144 
                        "balloonText": "[[title]]:<b>[[value]]</b>",
145 
                        "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
146 
                    }],
147 
                    "stockLegend":
148 
                    {
149 
                        "periodValueTextComparing": "[[percents.value.close]]%",
150 
                        "periodValueTextRegular": "[[value.close]]"
151 
                    }
152 
                },
153 
                {
154 
                    "title": "Volume",
155 
                    "percentHeight": 30,
156 
                    "stockGraphs": [
157 
                    {
158 
                        "valueField": "volume",
159 
                        "type": "column",
160 
                        "showBalloon": false,
161 
                        "fillAlphas": 1
162 
                    }],
163 
                    "stockLegend":
164 
                    {
165 
                        "periodValueTextRegular": "[[value.close]]"
166 
                    }
167 
                }],
168 
                "chartScrollbarSettings":
169 
                {
170 
                    "graph": "g1"
171 
                },
172 
                "chartCursorSettings":
173 
                {
174 
                    "valueBalloonsEnabled": true,
175 
                    "fullWidth": true,
176 
                    "cursorAlpha": 0.1,
177 
                    "valueLineBalloonEnabled": true,
178 
                    "valueLineEnabled": true,
179 
                    "valueLineAlpha": 0.5
180 
                },
181 
                "periodSelector":
182 
                {
183 
                    "position": "left",
184 
                    "periods": [
185 
                    {
186 
                        "period": "MM",
187 
                        "selected": true,
188 
                        "count": 1,
189 
                        "label": "1 month"
190 
                    },
191 
                    {
192 
                        "period": "YYYY",
193 
                        "count": 1,
194 
                        "label": "1 year"
195 
                    },
196 
                    {
197 
                        "period": "YTD",
198 
                        "label": "YTD"
199 
                    },
200 
                    {
201 
                        "period": "MAX",
202 
                        "label": "MAX"
203 
                    }]
204 
                },
205 
                "dataSetSelector":
206 
                {
207 
                    "position": "left"
208 
                },
209 
                "responsive":
210 
                {
211 
                    "enabled": true
212 
                }
213 
            });
214 
        </script>
215 
    </head>
216 
 
217 
    <body>
218 
        <div id="chartdiv" style="width: 100%; height: 100%;"></div>
219 
    </body>
220 
 
221 
</html>