Drill down solidgauge chart to 2 series bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

Drill down solidgauge chart to 2 series bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </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 id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
// Create the chart
var barOptions,//from  www .  j a v a  2s  .  c  om
      solidOptions;
barOptions = {
   chart:{
     type: 'bar'
  },
  series:[{
     data:[1,2,3]
  }],
  plotOptions: {
    series: {
      point: {
        events: {
          click: function() {
            var chart = this.series.chart;
            chart.destroy();
            Highcharts.chart('container', solidOptions);
          }
        }
      }
    }
  },
}
solidOptions = {
 chart: {
    type: 'solidgauge'
  },
  legend: {
    enabled: false
  },
  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  plotOptions: {
    series: {
      point: {
        events: {
          click: function() {
            var chart = this.series.chart;
            chart.destroy();
            Highcharts.chart('container', barOptions);
          }
        }
      }
    }
  },
  tooltip: {
    enabled: false
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33,
    }]
  }]
};
Highcharts.chart('container', solidOptions);

      </script>  
   </body>
</html>

Related Tutorials