Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

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