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 
            alignTicks: false,
18 
            plotBackgroundColor: null,
19 
            plotBackgroundImage: null,
20 
            plotBorderWidth: 0,
21 
            plotShadow: false
22 
        },
23 
 
24 
        title: {
25 
            text: 'Speedometer with dual axes'
26 
        },
27 
 
28 
        pane: {
29 
            startAngle: -150,
30 
            endAngle: 150
31 
        },
32 
 
33 
        yAxis: [{
34 
            min: 0,
35 
            max: 200,
36 
            lineColor: '#339',
37 
            tickColor: '#339',
38 
            minorTickColor: '#339',
39 
            offset: -25,
40 
            lineWidth: 2,
41 
            labels: {
42 
                distance: -20,
43 
                rotation: 'auto'
44 
            },
45 
            tickLength: 5,
46 
            minorTickLength: 5,
47 
            endOnTick: false
48 
        }, {
49 
            min: 0,
50 
            max: 124,
51 
            tickPosition: 'outside',
52 
            lineColor: '#933',
53 
            lineWidth: 2,
54 
            minorTickPosition: 'outside',
55 
            tickColor: '#933',
56 
            minorTickColor: '#933',
57 
            tickLength: 5,
58 
            minorTickLength: 5,
59 
            labels: {
60 
                distance: 12,
61 
                rotation: 'auto'
62 
            },
63 
            offset: -20,
64 
            endOnTick: false
65 
        }],
66 
 
67 
        series: [{
68 
            name: 'Speed',
69 
            data: [80],
70 
            dataLabels: {
71 
                formatter: function () {
72 
                    var kmh = this.y,
73 
                        mph = Math.round(kmh * 0.621);
74 
                    return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
75 
                        '<span style="color:#933">' + mph + ' mph</span>';
76 
                },
77 
                backgroundColor: {
78 
                    linearGradient: {
79 
                        x1: 0,
80 
                        y1: 0,
81 
                        x2: 0,
82 
                        y2: 1
83 
                    },
84 
                    stops: [
85 
                        [0, '#DDD'],
86 
                        [1, '#FFF']
87 
                    ]
88 
                }
89 
            },
90 
            tooltip: {
91 
                valueSuffix: ' km/h'
92 
            }
93 
        }]
94 
 
95 
    },
96 
        // Add some life
97 
        function (chart) {
98 
            setInterval(function () {
99 
                var point = chart.series[0].points[0],
100 
                    newVal,
101 
                    inc = Math.round((Math.random() - 0.5) * 20);
102 
 
103 
                newVal = point.y + inc;
104 
                if (newVal < 0 || newVal > 200) {
105 
                    newVal = point.y - inc;
106 
                }
107 
 
108 
                point.update(newVal);
109 
 
110 
            }, 3000);
111 
 
112 
        });
113 
});
114 
 
115 
		</script>
116 
	</head>
117 
	<body>
118 
<script src="../../js/highcharts.js"></script>
119 
<script src="../../js/highcharts-more.js"></script>
120 
<script src="../../js/modules/exporting.js"></script>
121 
 
122 
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
123 
 
124 
	</body>
125 
</html>