jquery - Load JSON Data into Highcharts Drilldown map Dynamicly -

I use PHP to create JSON files for my main US map and for drill down maps. I would like to include both data points in the map using the following example:

Someone has suggested this on the Hichchart platform:

The simple idea is not to use the drilldown, but to develop the solution through adding and removing the chain - these calls can use AJAX calls, so the data will be included in asynchronous.

Map data using the main code below:

main.js code that gets a call on my page

  function create_chart () {$ .getJSON ('/includes/data/states.json', function (data) {$ ('# container'). High Chart ('map', {series: [ {Name: 'state', data: data, map data: highchart map ['country / us / us-all'], by joining: ['HC-key', 'code'], type: map ' }],});}); } $ (Document) .ready (create_chart);  

Sample of key map data (states.json)

  [{"Drilldown": "AK", "Code "": "Value": "value": "1"}, {"drilldown": "al", "code": "we-al", "value": "22"}, {"drilldown": "Ar "," Code ":" us-ar "," value ":" 7 "}, ...]  

I added the JSON file Has drillown items. Here's the format:

Sample of drill data (counties.json)

  [{"code": "us-de-005" "Baldwin County, AL", "Value": "Name": "Suspense County, DE", "Value": "2"}, {"Code": "Us-al-03", "Name" 1 "}, {" code ":" us-al-39 "," name ":" covington county, al "," value ":" 2 "}, ...]  

< P> I think I need to adjust the following line in the example that is currently set to dummy random data:

line 46-51

  data = high Artskgejasn (Haicharts. Maps [Mapaki]); // Set a non-random bogus value $ .each (data, function (i) {this.value = i;});  

How can I include my Jason data instead of fake data?

Therefore, you have this piece of code:

  $ .getScript ('http://code.highcharts.com/mapdata/' + Mapcars + '.js', function () {var mapData = Highcharts.geojson (Highcharts.maps [mapKey]); // Namespace // set Make a random bogus value $ .each (data, function (i) {this.value = i;}); ...});  

Which load map. Now, instead of setting the data, make another AJAX call:

  $ .getScript ('http://code.highcharts.com/mapdata/' + Mapcars + '.js', Function () {Data = Highcharts.geojson}; // Get the data: $ .getJSON ("myURL? Mapkey =" + mapKey, function (data_2) {// series data data to your data Assign Point = [] ... ... Update in Callback Charts: Hide the loading and add the series chart. Load (); Clear timeout (failed); chart.addSeriesAsDrilldown (e.point, {name: e) By joining .point.name,: ['HC-key', 'code'], type Type: 'map', data: data, data labels: {enabled: true, format: '{point.name}'}});}); ...});