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 
$(function () {
13 
    $('#container').highcharts({
14 
        chart: {
15 
            type: 'waterfall'
16 
        },
17 
 
18 
        title: {
19 
            text: 'Highcharts Waterfall'
20 
        },
21 
 
22 
        xAxis: {
23 
            type: 'category'
24 
        },
25 
 
26 
        yAxis: {
27 
            title: {
28 
                text: 'USD'
29 
            }
30 
        },
31 
 
32 
        legend: {
33 
            enabled: false
34 
        },
35 
 
36 
        tooltip: {
37 
            pointFormat: '<b>${point.y:,.2f}</b> USD'
38 
        },
39 
 
40 
        series: [{
41 
            upColor: Highcharts.getOptions().colors[2],
42 
            color: Highcharts.getOptions().colors[3],
43 
            data: [{
44 
                name: 'Start',
45 
                y: 120000
46 
            }, {
47 
                name: 'Product Revenue',
48 
                y: 569000
49 
            }, {
50 
                name: 'Service Revenue',
51 
                y: 231000
52 
            }, {
53 
                name: 'Positive Balance',
54 
                isIntermediateSum: true,
55 
                color: Highcharts.getOptions().colors[1]
56 
            }, {
57 
                name: 'Fixed Costs',
58 
                y: -342000
59 
            }, {
60 
                name: 'Variable Costs',
61 
                y: -233000
62 
            }, {
63 
                name: 'Balance',
64 
                isSum: true,
65 
                color: Highcharts.getOptions().colors[1]
66 
            }],
67 
            dataLabels: {
68 
                enabled: true,
69 
                formatter: function () {
70 
                    return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
71 
                },
72 
                style: {
73 
                    color: '#FFFFFF',
74 
                    fontWeight: 'bold',
75 
                    textShadow: '0px 0px 3px black'
76 
                }
77 
            },
78 
            pointPadding: 0
79 
        }]
80 
    });
81 
});
82 
 
83 
		</script>
84 
	</head>
85 
	<body>
86 
<script src="../../js/highcharts.js"></script>
87 
<script src="../../js/highcharts-more.js"></script>
88 
<script src="../../js/modules/exporting.js"></script>
89 
 
90 
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
91 
 
92 
	</body>
93 
</html>