Chart with drilldown to handle click event of drill up button - Javascript highcharts

Javascript examples for highcharts:Chart Drilldown

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

Description

Chart with drilldown to handle click event of drill up button

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo: chart with drilldown. Drill up button theming and click event on drill up</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from w ww .  j  a v a  2  s  .c o m
    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drillup: function (e) {
                    console.log('drill Up');
                    console.log(this);
                    console.log(this.options.series[0].name);
                    console.log(this.options.series[0].data[0].name);
                }
            }
        },
        title: {
            text: 'DrillUp button styling'
        },
        xAxis: {
            type: 'category'
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },
        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Dieren',
                y: 5,
                drilldown: 'animals'
            }, {
                name: 'Fruit',
                y: 2,
                drilldown: 'fruits'
            }, {
                name: "Auto's",
                y: 4
            }]
        }],
        drilldown: {
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    y: 0,
                    x: 0
                },
                theme: {
                    fill: 'white',
                    'stroke-width': 1,
                    stroke: 'silver',
                    r: 0,
                    states: {
                        hover: {
                            fill: '#bada55'
                        },
                        select: {
                            stroke: '#039',
                            fill: '#bada55'
                        }
                    }
                }
            },
            series: [{
                id: 'animals',
                data: [
                    ['Katten', 4],
                    ['Honden', 2],
                    ['Koeien', 1],
                    ['Schapen', 2],
                    ['Varkens', 1]
                ]
            }, {
                id: 'fruits',
                data: [
                    ['Appels', 4],
                    ['Sinaasappels', 2]
                ]
            }]
        }
    })
});

      </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