Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
875 lars 1 
<!DOCTYPE HTML>
2 
<html>
3 
	<head>
4 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 
		<title>Highstock Example</title>
6 
 
7 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
8 
		<style type="text/css">
9 
${demo.css}
10 
		</style>
11 
		<script type="text/javascript">
12 
$(function () {
13 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
14 
 
15 
        // split the data set into ohlc and volume
16 
        var ohlc = [],
17 
            volume = [],
18 
            dataLength = data.length,
19 
            // set the allowed units for data grouping
20 
            groupingUnits = [[
21 
                'week',                         // unit name
22 
                [1]                             // allowed multiples
23 
            ], [
24 
                'month',
25 
                [1, 2, 3, 4, 6]
26 
            ]],
27 
 
28 
            i = 0;
29 
 
30 
        for (i; i < dataLength; i += 1) {
31 
            ohlc.push([
32 
                data[i][0], // the date
33 
                data[i][1], // open
34 
                data[i][2], // high
35 
                data[i][3], // low
36 
                data[i][4] // close
37 
            ]);
38 
 
39 
            volume.push([
40 
                data[i][0], // the date
41 
                data[i][5] // the volume
42 
            ]);
43 
        }
44 
 
45 
 
46 
        // create the chart
47 
        $('#container').highcharts('StockChart', {
48 
 
49 
            rangeSelector: {
50 
                selected: 1
51 
            },
52 
 
53 
            title: {
54 
                text: 'AAPL Historical'
55 
            },
56 
 
57 
            yAxis: [{
58 
                labels: {
59 
                    align: 'right',
60 
                    x: -3
61 
                },
62 
                title: {
63 
                    text: 'OHLC'
64 
                },
65 
                height: '60%',
66 
                lineWidth: 2
67 
            }, {
68 
                labels: {
69 
                    align: 'right',
70 
                    x: -3
71 
                },
72 
                title: {
73 
                    text: 'Volume'
74 
                },
75 
                top: '65%',
76 
                height: '35%',
77 
                offset: 0,
78 
                lineWidth: 2
79 
            }],
80 
 
81 
            series: [{
82 
                type: 'candlestick',
83 
                name: 'AAPL',
84 
                data: ohlc,
85 
                dataGrouping: {
86 
                    units: groupingUnits
87 
                }
88 
            }, {
89 
                type: 'column',
90 
                name: 'Volume',
91 
                data: volume,
92 
                yAxis: 1,
93 
                dataGrouping: {
94 
                    units: groupingUnits
95 
                }
96 
            }]
97 
        });
98 
    });
99 
});
100 
		</script>
101 
	</head>
102 
	<body>
103 
<script src="../../js/highstock.js"></script>
104 
<script src="../../js/modules/exporting.js"></script>
105 
 
106 
 
107 
<div id="container" style="height: 400px; min-width: 310px"></div>
108 
	</body>
109 
</html>