|
|
- <!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 () {
- $('#container').highcharts({
-
- chart: {
- type: 'gauge',
- alignTicks: false,
- plotBackgroundColor: null,
- plotBackgroundImage: null,
- plotBorderWidth: 0,
- plotShadow: false
- },
-
- title: {
- text: 'Speedometer with dual axes'
- },
-
- pane: {
- startAngle: -150,
- endAngle: 150
- },
-
- yAxis: [{
- min: 0,
- max: 200,
- lineColor: '#339',
- tickColor: '#339',
- minorTickColor: '#339',
- offset: -25,
- lineWidth: 2,
- labels: {
- distance: -20,
- rotation: 'auto'
- },
- tickLength: 5,
- minorTickLength: 5,
- endOnTick: false
- }, {
- min: 0,
- max: 124,
- tickPosition: 'outside',
- lineColor: '#933',
- lineWidth: 2,
- minorTickPosition: 'outside',
- tickColor: '#933',
- minorTickColor: '#933',
- tickLength: 5,
- minorTickLength: 5,
- labels: {
- distance: 12,
- rotation: 'auto'
- },
- offset: -20,
- endOnTick: false
- }],
-
- series: [{
- name: 'Speed',
- data: [80],
- dataLabels: {
- formatter: function () {
- var kmh = this.y,
- mph = Math.round(kmh * 0.621);
- return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
- '<span style="color:#933">' + mph + ' mph</span>';
- },
- backgroundColor: {
- linearGradient: {
- x1: 0,
- y1: 0,
- x2: 0,
- y2: 1
- },
- stops: [
- [0, '#DDD'],
- [1, '#FFF']
- ]
- }
- },
- tooltip: {
- valueSuffix: ' km/h'
- }
- }]
-
- },
- // Add some life
- function (chart) {
- setInterval(function () {
- var point = chart.series[0].points[0],
- newVal,
- inc = Math.round((Math.random() - 0.5) * 20);
-
- newVal = point.y + inc;
- if (newVal < 0 || newVal > 200) {
- newVal = point.y - inc;
- }
-
- point.update(newVal);
-
- }, 3000);
-
- });
- });
-
- </script>
- </head>
- <body>
- <script src="../../js/highcharts.js"></script>
- <script src="../../js/highcharts-more.js"></script>
- <script src="../../js/modules/exporting.js"></script>
-
- <div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
-
- </body>
- </html>
|
