Highcharts Demo

author(s): Torstein Hønsi

by Behseini

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="container">
    <button type="button" id="animals" class="btn btn-default">Animal Details</button>
    <button type="button" id="fruits" class="btn btn-default">Fruits Details</button>
    <button type="button" id="overview" class="btn btn-default disabled">Back to Overview</button>
</div>

JavaScript

$(function () {
    var chart;
    function drawChart1() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Basic drilldown'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                type: 'category'
            },
            legend: {
                enabled: false
            },
             credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'Things',
                colorByPoint: true,
                data: [{
                    name: 'Animals',
                    y: 5,
                    drilldown: 'animals'
                }, {
                    name: 'Fruits',
                    y: 2,
                    drilldown: 'fruits'
                }]
            }],
            drilldown: {
                series: [{
                    id: 'animals',
                    data: [
                        ['Cats', 4],
                        ['Dogs', 2],
                        ['Cows', 1],
                        ['Sheep', 2],
                        ['Pigs', 1]
                    ]
                }, {
                    id: 'fruits',
                    data: [
                        ['Apples', 4],
                        ['Oranges', 2]
                    ]
                }]
            }
        });

        $("#animals").on("click", function () {
            $(this).addClass('disabled');
            $("#overview").removeClass('disabled');
 ...