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=usdeur.json&callback=?', function (data) {
14
 
15
        var startDate = new Date(data[data.length - 1][0]), // Get year of last data point
16
            minRate = 1,
17
            maxRate = 0,
18
            startPeriod = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()),
19
            date,
20
            rate,
21
            index;
22
        startDate.setMonth(startDate.getMonth() - 3); // a quarter of a year before last data point
23
        for (index = data.length - 1; index >= 0; index = index - 1) {
24
            date = data[index][0]; // data[i][0] is date
25
            rate = data[index][1]; // data[i][1] is exchange rate
26
            if (date < startPeriod) {
27
                break; // stop measuring highs and lows
28
            }
29
            if (rate > maxRate) {
30
                maxRate = rate;
31
            }
32
            if (rate < minRate) {
33
                minRate = rate;
34
            }
35
        }
36
 
37
        // Create the chart
38
        $('#container').highcharts('StockChart', {
39
 
40
            rangeSelector: {
41
                selected: 1
42
            },
43
 
44
            title: {
45
                text: 'USD to EUR exchange rate'
46
            },
47
 
48
            yAxis: {
49
                title: {
50
                    text: 'Exchange rate'
51
                },
52
                plotLines: [{
53
                    value: minRate,
54
                    color: 'green',
55
                    dashStyle: 'shortdash',
56
                    width: 2,
57
                    label: {
58
                        text: 'Last quarter minimum'
59
                    }
60
                }, {
61
                    value: maxRate,
62
                    color: 'red',
63
                    dashStyle: 'shortdash',
64
                    width: 2,
65
                    label: {
66
                        text: 'Last quarter maximum'
67
                    }
68
                }]
69
            },
70
 
71
            series: [{
72
                name: 'USD to EUR',
73
                data: data,
74
                tooltip: {
75
                    valueDecimals: 4
76
                }
77
            }]
78
        });
79
    });
80
});
81
		</script>
82
	</head>
83
	<body>
84
<script src="../../js/highstock.js"></script>
85
<script src="../../js/modules/exporting.js"></script>
86
 
87
 
88
<div id="container" style="height: 400px; min-width: 310px"></div>
89
	</body>
90
</html>