Drilldown from map to chart - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

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

Description

Drilldown from map to chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Kuwait - Highmaps</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/*from  ww  w .j  av  a 2  s . c o  m*/
   height: 500px;
   min-width: 310px;
   max-width: 800px;
   margin: 0 auto;
}
#back {
   display: none
}
.loading {
   margin-top: 10em;
   text-align: center;
   color: gray;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/maps/highmaps.js"></script> 
      <script src="https://code.highcharts.com/maps/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/mapdata/countries/kw/kw-all.js"></script> 
      <button id="back" onclick="mapChart()"> Back </button> 
      <div id="container"></div> 
      <script type="text/javascript">
var data = [
    ['kw-ja', 0],
    ['kw-ku', 1],
    ['kw-fa', 2],
    ['kw-ah', 3],
    ['kw-1922', 4],
    ['kw-hw', 5]
];
function mapChart() {
    Highcharts.mapChart('container', {
        chart: {
            map: 'countries/kw/kw-all'
        },
        title: {
            text: 'Highmaps basic demo'
        },
        subtitle: {
            text: 'Source map: <a href="https://code.highcharts.com/mapdata/countries/kw/kw-all.js">Kuwait</a>'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        colorAxis: {
            min: 0
        },
        series: [{
            data: data,
            name: 'Random data',
            point: {
                events: {
                    click: function() {
                        columnChart(this.name);
                        document.getElementById("back").style.display = "block"
                    }
                }
            },
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });
    document.getElementById("back").style.display = "none";
}
function columnChart(name) {
    var data = [1, 2, 3];
    if (name === "Al Jahrah") {
        data = [2, 2, 2];
    }
    Highcharts.chart('container', {
       title: {
           text: name
        },
        series: [{
            type: 'column',
            data: data
        }]
    });
}
mapChart();

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

Related Tutorials