Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 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 
#container {
10 
	min-width: 300px;
11 
	max-width: 600px;
12 
	margin: 0 auto;
13 
}
14 
		</style>
15 
		<script type="text/javascript">
16 
$(function () {
17 
    $('#container').highcharts({
18 
        series: [{
19 
            type: "treemap",
20 
            layoutAlgorithm: 'stripes',
21 
            alternateStartingDirection: true,
22 
            levels: [{
23 
                level: 1,
24 
                layoutAlgorithm: 'sliceAndDice',
25 
                dataLabels: {
26 
                    enabled: true,
27 
                    align: 'left',
28 
                    verticalAlign: 'top',
29 
                    style: {
30 
                        fontSize: '15px',
31 
                        fontWeight: 'bold'
32 
                    }
33 
                }
34 
            }],
35 
            data: [{
36 
                id: 'A',
37 
                name: 'Apples',
38 
                color: "#EC2500"
39 
            }, {
40 
                id: 'B',
41 
                name: 'Bananas',
42 
                color: "#ECE100"
43 
            }, {
44 
                id: 'O',
45 
                name: 'Oranges',
46 
                color: '#EC9800'
47 
            }, {
48 
                name: 'Anne',
49 
                parent: 'A',
50 
                value: 5
51 
            }, {
52 
                name: 'Rick',
53 
                parent: 'A',
54 
                value: 3
55 
            }, {
56 
                name: 'Peter',
57 
                parent: 'A',
58 
                value: 4
59 
            }, {
60 
                name: 'Anne',
61 
                parent: 'B',
62 
                value: 4
63 
            }, {
64 
                name: 'Rick',
65 
                parent: 'B',
66 
                value: 10
67 
            }, {
68 
                name: 'Peter',
69 
                parent: 'B',
70 
                value: 1
71 
            }, {
72 
                name: 'Anne',
73 
                parent: 'O',
74 
                value: 1
75 
            }, {
76 
                name: 'Rick',
77 
                parent: 'O',
78 
                value: 3
79 
            }, {
80 
                name: 'Peter',
81 
                parent: 'O',
82 
                value: 3
83 
            }, {
84 
                name: 'Susanne',
85 
                parent: 'Kiwi',
86 
                value: 2,
87 
                color: '#9EDE00'
88 
            }]
89 
        }],
90 
        title: {
91 
            text: 'Fruit consumption'
92 
        }
93 
    });
94 
});
95 
		</script>
96 
	</head>
97 
	<body>
98 
<script src="../../js/highcharts.js"></script>
99 
<script src="../../js/modules/treemap.js"></script>
100 
<div id="container"></div>
101 
	</body>
102 
</html>