Highmap Final

San

by Bhabani Raju

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
    <script src="http://code.highcharts.com/maps/modules/map.js"></script>
    <script src="http://code.highcharts.com/maps/modules/data.js"></script>
    <script src="http://www.highcharts.com/samples/data/maps/world.js"></script>
    
      <div id="container"></div>

JavaScript

$.ajax({
 		dataType: "json",
        url: 'https://newapi.brandwatch.com/projects/1998196209/data/volume/queries/countries?endDate=2016-11-15T00:00:00.000Z&queryId=1998657357&startDate=2016-11-01T00:00:00.000Z&access_token=c59b4f94-5a05-4251-a1ea-b29725802b6f',
        success: function(response) {
        var jsontext = response.results;
	 
        var jsonName;var jsonValue;
        $(jQuery.parseJSON(JSON.stringify(jsontext))).each(function() {  
            var data =this.values;
          var jname = []; 
            $(data).each(function(index, element) {
                var a = {};
                a.code = element.id.toUpperCase();;
                a.z = element.value;
				jname.push(a);
            });
             jsonName = jname;
             console.log(jsonName);
alert(jsonName);
              $('#container').highcharts('Map', {
            chart : {
                borderWidth : 1
            },

            title: {
                text: 'World population 2010 by country'
            },
            
            subtitle : {
                text : 'Demo of Highcharts map with bubbles'
            },

            legend: {
                enabled: false
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            series : [{
                name: 'Countries',
                mapData: Highcharts.maps.world,
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                mapData: Highcharts.maps.world,
                name: 'Population 2010',
                joinBy: 'code',
                data: jsonName,
                minSize: 4,
                maxSize: '12%',
                tooltip: {
                    pointFormat: '{point.code}: {point.z} thousands'
                }
            }]
        });
        
      }
	  )}
    });
   ...