Solid Gauge Thermometer from -30 to +60 - Javascript highcharts

Javascript examples for highcharts:Gauge Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Gauge Chart

Description

Solid Gauge Thermometer from -30 to +60

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//from w w w .j  av a  2  s. com
    var gaugeOptions = {
        chart: {
            type: 'solidgauge'
        },
        title: null,
        pane: {
            size: '90%',
            startAngle: -180,
            endAngle: 90,
            background: {
                backgroundColor: '#EEE',
                innerRadius: '95%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },
        tooltip: {
            enabled: false
        },
        // the value axis
        yAxis: {
            stops: [
                [0, '#000088'],
                [29 / 90, '#000088'],
                [30 / 90, '#5555ff'],
                [41 / 90, '#5555ff'],
                [42 / 90, '#00ff00'],
                [54 / 90, '#00ff00'],
                [55 / 90, '#ff8c00'],
                [59 / 90, '#ff8c00'],
                [60 / 90, '#ff0000']
            ],
            lineWidth: 0,
            minorTickInterval: 0,
            tickPixelInterval: 50,
            tickWidth: 1,
            labels: {
                enabled: true,
                distance: 10
            }
        },
        plotOptions: {
            solidgauge: {
                innerRadius: '95%',
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };
    $('#temp001').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: -30,
            max: 60
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'inTemp',
            data: [-0.1], /////// Temp Value //////////
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y} &deg;C</span><br/>' + '<span style="font-size:12px;color:silver">abcde</span></div>'
            }
        }]
    }));
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/solid-gauge.js"></script> 
      <div style="width: 600px; height: 400px; margin: 0 auto"> 
         <div id="temp001" style="width: 300px; height: 200px; float: left"></div> 
      </div>  
   </body>
</html>

Related Tutorials