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 
 
14 
    var gaugeOptions = {
15 
 
16 
        chart: {
17 
            type: 'solidgauge'
18 
        },
19 
 
20 
        title: null,
21 
 
22 
        pane: {
23 
            center: ['50%', '85%'],
24 
            size: '140%',
25 
            startAngle: -90,
26 
            endAngle: 90,
27 
            background: {
28 
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
29 
                innerRadius: '60%',
30 
                outerRadius: '100%',
31 
                shape: 'arc'
32 
            }
33 
        },
34 
 
35 
        tooltip: {
36 
            enabled: false
37 
        },
38 
 
39 
        // the value axis
40 
        yAxis: {
41 
            stops: [
42 
                [0.1, '#55BF3B'], // green
43 
                [0.5, '#DDDF0D'], // yellow
44 
                [0.9, '#DF5353'] // red
45 
            ],
46 
            lineWidth: 0,
47 
            minorTickInterval: null,
48 
            tickPixelInterval: 400,
49 
            tickWidth: 0,
50 
            title: {
51 
                y: -70
52 
            },
53 
            labels: {
54 
                y: 16
55 
            }
56 
        },
57 
 
58 
        plotOptions: {
59 
            solidgauge: {
60 
                dataLabels: {
61 
                    y: 5,
62 
                    borderWidth: 0,
63 
                    useHTML: true
64 
                }
65 
            }
66 
        }
67 
    };
68 
 
69 
    // The speed gauge
70 
    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
71 
        yAxis: {
72 
            min: 0,
73 
            max: 200,
74 
            title: {
75 
                text: 'Speed'
76 
            }
77 
        },
78 
 
79 
        credits: {
80 
            enabled: false
81 
        },
82 
 
83 
        series: [{
84 
            name: 'Speed',
85 
            data: [80],
86 
            dataLabels: {
87 
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
88 
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
89 
                       '<span style="font-size:12px;color:silver">km/h</span></div>'
90 
            },
91 
            tooltip: {
92 
                valueSuffix: ' km/h'
93 
            }
94 
        }]
95 
 
96 
    }));
97 
 
98 
    // The RPM gauge
99 
    $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
100 
        yAxis: {
101 
            min: 0,
102 
            max: 5,
103 
            title: {
104 
                text: 'RPM'
105 
            }
106 
        },
107 
 
108 
        series: [{
109 
            name: 'RPM',
110 
            data: [1],
111 
            dataLabels: {
112 
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
113 
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
114 
                       '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
115 
            },
116 
            tooltip: {
117 
                valueSuffix: ' revolutions/min'
118 
            }
119 
        }]
120 
 
121 
    }));
122 
 
123 
    // Bring life to the dials
124 
    setInterval(function () {
125 
        // Speed
126 
        var chart = $('#container-speed').highcharts(),
127 
            point,
128 
            newVal,
129 
            inc;
130 
 
131 
        if (chart) {
132 
            point = chart.series[0].points[0];
133 
            inc = Math.round((Math.random() - 0.5) * 100);
134 
            newVal = point.y + inc;
135 
 
136 
            if (newVal < 0 || newVal > 200) {
137 
                newVal = point.y - inc;
138 
            }
139 
 
140 
            point.update(newVal);
141 
        }
142 
 
143 
        // RPM
144 
        chart = $('#container-rpm').highcharts();
145 
        if (chart) {
146 
            point = chart.series[0].points[0];
147 
            inc = Math.random() - 0.5;
148 
            newVal = point.y + inc;
149 
 
150 
            if (newVal < 0 || newVal > 5) {
151 
                newVal = point.y - inc;
152 
            }
153 
 
154 
            point.update(newVal);
155 
        }
156 
    }, 2000);
157 
 
158 
 
159 
});
160 
		</script>
161 
	</head>
162 
	<body>
163 
<script src="../../js/highcharts.js"></script>
164 
<script src="../../js/highcharts-more.js"></script>
165 
 
166 
<script src="../../js/modules/solid-gauge.js"></script>
167 
 
168 
<div style="width: 600px; height: 400px; margin: 0 auto">
169 
	<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
170 
	<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
171 
</div>
172 
 
173 
 
174 
	</body>
175 
</html>