Highcharts - Solid Gauge Chart

Previous
Quiz
Next

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.

An example of a Solid Gauge Chart is given below.

Configurations

Let us now see the additional configurations/steps taken.

chart.type

Configure the chart type to be gauge based. Set the type as 'solidguage'.

var chart = {
   type: 'solidguage'
};

pane

This type applies only to polar charts and angular gauges. This configuration object holds general options for the combined X and Y axes set. Each xAxis or yAxis can reference the pane by index.

var pane = {
  startAngle: -150,
  endAngle: 150
};

Example

highcharts_guage_solid.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <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>
   </head>
   
   <body>
      <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>
      
      <script language = "JavaScript">
         $(document).ready(function() {  
            var chart = {      
               type: 'solidgauge'
            };
            var title = null;
            
            var pane = {
               center: ['50%', '85%'],
               size: '140%',
               startAngle: -90,
               endAngle: 90,
               
               background: {
                  backgroundColor: (
                     Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                  
                  innerRadius: '60%',
                  outerRadius: '100%',
                  shape: 'arc'
               }
            };
            var tooltip = {
               enabled: false
            };
            
            // the value axis
            var 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
               },
               min: 0,
               max: 200,
               title: {
                  text: 'Speed'
               }
            };
            var plotOptions = {
               solidgauge: {
                  dataLabels: {
                     y: 5,
                     borderWidth: 0,
                     useHTML: true
                  }
               }
            };
            var credits = {
               enabled: false
            };
            var 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'
               }
            }];
	  
            var json = {};   
            json.chart = chart; 
            json.title = title;       
            json.pane = pane; 
            json.tooltip = tooltip; 
            json.yAxis = yAxis; 
            json.credits = credits; 
            json.series = series;     
            $('#container-speed').highcharts(json);   
            
            // 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
               },
               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'
               }
            }];
   
            json.yAxis = yAxis;   
            json.series = series;     
            $('#container-rpm').highcharts(json);  

            var chartFunction = function() {
               // Speed
               var chart = $('#container-speed').highcharts();
               var point;
               var newVal;
               var 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);
               }
            };   
               
            // Bring life to the dials
            setInterval(chartFunction, 2000);
         });
      </script>
   </body>
   
</html>

Result

Verify the result.

highcharts_angular_gauges.htm
Print Page
Previous
Next
Advertisements