switch between JSON data sets in HighMaps using setData? - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Json Data

Description

switch between JSON data sets in HighMaps using setData?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from w  ww  .j av  a2s.c om
   height: 500px;
   min-width: 310px;
   max-width: 800px;
   margin: 0 auto;
}
.loading {
   margin-top: 10em;
   text-align: center;
   color: gray;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/maps/highmaps.js"></script> 
      <script src="https://code.highcharts.com/maps/modules/data.js"></script> 
      <script src="https://code.highcharts.com/mapdata/custom/world.js"></script> 
      <div id="container" style="max-width: 1000px"></div> 
      <button id="setdata">Set data</button> 
      <script type="text/javascript">
$.getJSON('https://api.myjson.com/bins/c2vix', function(data1) {
  $.getJSON('https://api.myjson.com/bins/iz2pl', function(data2) {
    Highcharts.mapChart('container', {
      title: {
        text: 'Population without access to electricity (millions)'
      },
      mapNavigation: {
        enabled: true,
        buttonOptions: {
          verticalAlign: 'bottom'
        }
      },
      colorAxis: {
        type: 'logarithmic'
      },
      series: [{
        data: data2.slice(),
        dataSetNo: 'data2',
        mapData: Highcharts.maps['custom/world'],
        joinBy: ['iso-a2', 'code'],
        name: 'Population without access to electricity',
        borderColor: 'black',
        borderWidth: 0.2,
        states: {
          hover: {
            borderWidth: 1
          }
        },
        tooltip: {
          valueSuffix: ' million'
        }
      }]
    });
    $('#setdata').click(function() {
      var chart = Highcharts.charts[0],
        data,
        dataSetNo;
      if (chart.series[0].options.dataSetNo === 'data1') {
        data = data2.slice();
        dataSetNo = 'data2';
      } else {
        data = data1.slice();
        dataSetNo = 'data1';
      }
      chart.series[0].update({
        data: data,
        dataSetNo: dataSetNo
      });
    });
  });
});

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

Related Tutorials