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 
${demo.css}
10 
		</style>
11 
		<script type="text/javascript">
12 
$(function () {
13 
    $('#container').highcharts({
14 
 
15 
        chart: {
16 
            type: 'gauge',
17 
            plotBorderWidth: 1,
18 
            plotBackgroundColor: {
19 
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
20 
                stops: [
21 
                    [0, '#FFF4C6'],
22 
                    [0.3, '#FFFFFF'],
23 
                    [1, '#FFF4C6']
24 
                ]
25 
            },
26 
            plotBackgroundImage: null,
27 
            height: 200
28 
        },
29 
 
30 
        title: {
31 
            text: 'VU meter'
32 
        },
33 
 
34 
        pane: [{
35 
            startAngle: -45,
36 
            endAngle: 45,
37 
            background: null,
38 
            center: ['25%', '145%'],
39 
            size: 300
40 
        }, {
41 
            startAngle: -45,
42 
            endAngle: 45,
43 
            background: null,
44 
            center: ['75%', '145%'],
45 
            size: 300
46 
        }],
47 
 
48 
        yAxis: [{
49 
            min: -20,
50 
            max: 6,
51 
            minorTickPosition: 'outside',
52 
            tickPosition: 'outside',
53 
            labels: {
54 
                rotation: 'auto',
55 
                distance: 20
56 
            },
57 
            plotBands: [{
58 
                from: 0,
59 
                to: 6,
60 
                color: '#C02316',
61 
                innerRadius: '100%',
62 
                outerRadius: '105%'
63 
            }],
64 
            pane: 0,
65 
            title: {
66 
                text: 'VU<br/><span style="font-size:8px">Channel A</span>',
67 
                y: -40
68 
            }
69 
        }, {
70 
            min: -20,
71 
            max: 6,
72 
            minorTickPosition: 'outside',
73 
            tickPosition: 'outside',
74 
            labels: {
75 
                rotation: 'auto',
76 
                distance: 20
77 
            },
78 
            plotBands: [{
79 
                from: 0,
80 
                to: 6,
81 
                color: '#C02316',
82 
                innerRadius: '100%',
83 
                outerRadius: '105%'
84 
            }],
85 
            pane: 1,
86 
            title: {
87 
                text: 'VU<br/><span style="font-size:8px">Channel B</span>',
88 
                y: -40
89 
            }
90 
        }],
91 
 
92 
        plotOptions: {
93 
            gauge: {
94 
                dataLabels: {
95 
                    enabled: false
96 
                },
97 
                dial: {
98 
                    radius: '100%'
99 
                }
100 
            }
101 
        },
102 
 
103 
 
104 
        series: [{
105 
            data: [-20],
106 
            yAxis: 0
107 
        }, {
108 
            data: [-20],
109 
            yAxis: 1
110 
        }]
111 
 
112 
    },
113 
 
114 
        // Let the music play
115 
        function (chart) {
116 
            setInterval(function () {
117 
                if (chart.series) { // the chart may be destroyed
118 
                    var left = chart.series[0].points[0],
119 
                        right = chart.series[1].points[0],
120 
                        leftVal,
121 
                        rightVal,
122 
                        inc = (Math.random() - 0.5) * 3;
123 
 
124 
                    leftVal =  left.y + inc;
125 
                    rightVal = leftVal + inc / 3;
126 
                    if (leftVal < -20 || leftVal > 6) {
127 
                        leftVal = left.y - inc;
128 
                    }
129 
                    if (rightVal < -20 || rightVal > 6) {
130 
                        rightVal = leftVal;
131 
                    }
132 
 
133 
                    left.update(leftVal, false);
134 
                    right.update(rightVal, false);
135 
                    chart.redraw();
136 
                }
137 
            }, 500);
138 
 
139 
        });
140 
});
141 
		</script>
142 
	</head>
143 
	<body>
144 
<script src="../../js/highcharts.js"></script>
145 
<script src="../../js/highcharts-more.js"></script>
146 
<script src="../../js/modules/exporting.js"></script>
147 
 
148 
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
149 
 
150 
	</body>
151 
</html>