hidden values passed between a drilldown? - Javascript highcharts

Javascript examples for highcharts:Chart Drilldown

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

Description

hidden values passed between a drilldown?

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">
    $(window).load(function(){/*  w  ww.  ja  v a2  s . c o  m*/
$(function() {
  // Create the chart
  Highcharts.chart('container', {
    chart: {
      type: 'bar',
      events: {
        drilldown: function (e) {
          e.seriesOptions.hiddenValue = e.point.options.hiddenValue;
        }
      }
    },
    title: {
      text: 'Overall Status'
    },
    xAxis: {
      type: 'category',
      labels: {
        style: {
          fontSize: '15px'
        }
      }
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      series: {
        borderWidth: 0,
        dataLabels: {
          enabled: true,
          style: {
            fontSize: '20px'
          }
        },
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              var seriesOptions = this.series && this.series.options;
              var hiddenValue = seriesOptions && seriesOptions.hiddenValue;
               console.log(hiddenValue);
              if (this.options && this.options.url) {
              }
            }
          }
        }
      }
    },
    series: [{
      name: 'Status',
      colorByPoint: true,
      data: [{
        name: 'Item 1',
        y: 80,
        drilldown: 'item1',
        hiddenValue: 'hidden 1',
      }, {
        name: 'Item 2',
        y: 33,
        drilldown: 'item2',
        hiddenValue: 'hidden 2'
      }]
    }],
    drilldown: {
      series: [{
        id: 'item1',
        data: [{
          name: 'Condition 1',
          y: 7
        }, {
          name: 'Condition 2',
          y: 2,
        }, {
          name: 'Condition 3',
          y: 1,
        }]
      }, {
        id: 'item2',
        data: [{
          name: 'Condition 1',
          y: 3
        }, {
          name: 'Condition 2',
          y: 2,
        }, {
          name: 'Condition 3',
          y: 9,
        }]
      }]
    }
  });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/drilldown.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials