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>Highcharts 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 
// Data gathered from http://populationpyramid.net/germany/2015/
13 
$(function () {
14 
    // Age categories
15 
    var categories = ['0-4', '5-9', '10-14', '15-19',
16 
            '20-24', '25-29', '30-34', '35-39', '40-44',
17 
            '45-49', '50-54', '55-59', '60-64', '65-69',
18 
            '70-74', '75-79', '80-84', '85-89', '90-94',
19 
            '95-99', '100 + '];
20 
    $(document).ready(function () {
21 
        $('#container').highcharts({
22 
            chart: {
23 
                type: 'bar'
24 
            },
25 
            title: {
26 
                text: 'Population pyramid for Germany, 2015'
27 
            },
28 
            subtitle: {
29 
                text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
30 
            },
31 
            xAxis: [{
32 
                categories: categories,
33 
                reversed: false,
34 
                labels: {
35 
                    step: 1
36 
                }
37 
            }, { // mirror axis on right side
38 
                opposite: true,
39 
                reversed: false,
40 
                categories: categories,
41 
                linkedTo: 0,
42 
                labels: {
43 
                    step: 1
44 
                }
45 
            }],
46 
            yAxis: {
47 
                title: {
48 
                    text: null
49 
                },
50 
                labels: {
51 
                    formatter: function () {
52 
                        return Math.abs(this.value) + '%';
53 
                    }
54 
                }
55 
            },
56 
 
57 
            plotOptions: {
58 
                series: {
59 
                    stacking: 'normal'
60 
                }
61 
            },
62 
 
63 
            tooltip: {
64 
                formatter: function () {
65 
                    return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
66 
                        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
67 
                }
68 
            },
69 
 
70 
            series: [{
71 
                name: 'Male',
72 
                data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
73 
                    -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
74 
                    -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
75 
            }, {
76 
                name: 'Female',
77 
                data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
78 
                    3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
79 
                    1.8, 1.2, 0.6, 0.1, 0.0]
80 
            }]
81 
        });
82 
    });
83 
 
84 
});
85 
		</script>
86 
	</head>
87 
	<body>
88 
<script src="../../js/highcharts.js"></script>
89 
<script src="../../js/modules/exporting.js"></script>
90 
 
91 
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
92 
 
93 
	</body>
94 
</html>