|
|
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Highcharts Example</title>
-
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <style type="text/css">
- ${demo.css}
- </style>
- <script type="text/javascript">
- $(function () {
-
- var gaugeOptions = {
-
- chart: {
- type: 'solidgauge'
- },
-
- title: null,
-
- pane: {
- center: ['50%', '85%'],
- size: '140%',
- startAngle: -90,
- endAngle: 90,
- background: {
- backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
- innerRadius: '60%',
- outerRadius: '100%',
- shape: 'arc'
- }
- },
-
- tooltip: {
- enabled: false
- },
-
- // the value axis
- yAxis: {
- stops: [
- [0.1, '#55BF3B'], // green
- [0.5, '#DDDF0D'], // yellow
- [0.9, '#DF5353'] // red
- ],
- lineWidth: 0,
- minorTickInterval: null,
- tickPixelInterval: 400,
- tickWidth: 0,
- title: {
- y: -70
- },
- labels: {
- y: 16
- }
- },
-
- plotOptions: {
- solidgauge: {
- dataLabels: {
- y: 5,
- borderWidth: 0,
- useHTML: true
- }
- }
- }
- };
-
- // The speed gauge
- $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
- yAxis: {
- min: 0,
- max: 200,
- title: {
- text: 'Speed'
- }
- },
-
- credits: {
- enabled: false
- },
-
- series: [{
- name: 'Speed',
- data: [80],
- dataLabels: {
- format: '<div style="text-align:center"><span style="font-size:25px;color:' +
- ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
- '<span style="font-size:12px;color:silver">km/h</span></div>'
- },
- tooltip: {
- valueSuffix: ' km/h'
- }
- }]
-
- }));
-
- // The RPM gauge
- $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
- yAxis: {
- min: 0,
- max: 5,
- title: {
- text: 'RPM'
- }
- },
-
- series: [{
- name: 'RPM',
- data: [1],
- dataLabels: {
- format: '<div style="text-align:center"><span style="font-size:25px;color:' +
- ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
- '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
- },
- tooltip: {
- valueSuffix: ' revolutions/min'
- }
- }]
-
- }));
-
- // Bring life to the dials
- setInterval(function () {
- // Speed
- var chart = $('#container-speed').highcharts(),
- point,
- newVal,
- inc;
-
- if (chart) {
- point = chart.series[0].points[0];
- inc = Math.round((Math.random() - 0.5) * 100);
- newVal = point.y + inc;
-
- if (newVal < 0 || newVal > 200) {
- newVal = point.y - inc;
- }
-
- point.update(newVal);
- }
-
- // RPM
- chart = $('#container-rpm').highcharts();
- if (chart) {
- point = chart.series[0].points[0];
- inc = Math.random() - 0.5;
- newVal = point.y + inc;
-
- if (newVal < 0 || newVal > 5) {
- newVal = point.y - inc;
- }
-
- point.update(newVal);
- }
- }, 2000);
-
-
- });
- </script>
- </head>
- <body>
- <script src="../../js/highcharts.js"></script>
- <script src="../../js/highcharts-more.js"></script>
-
- <script src="../../js/modules/solid-gauge.js"></script>
-
- <div style="width: 600px; height: 400px; margin: 0 auto">
- <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
- <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
- </div>
-
-
- </body>
- </html>
|
