title: Load JSON Data into Highcharts Drilldown map Dynamicly
body: <p>I use PHP to generate JSON files for my main US map and for the drill down maps. I would like to incorporate both data points into the map using the following example:</p>
  
  <p><a href="http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/map-drilldown/" rel="nofollow">Highcharts Map Drilldown</a></p>
  
  <p>Someone on the Highcharts forum suggested this:</p>
  
  <blockquote>
    <p>The simple idea is to not use drilldown, but to develop workaround by
    adding and removing series - those calls can be using ajax calls, so
    data will be included asynchronously.</p>
  </blockquote>
  
  <p>I was able to incorporate the main map data using the following code:</p>
  
  <p><strong>main.js Code that gets called on my page</strong></p>
  
  <pre><code>function create_chart() {
          $.getJSON('/includes/data/states.json', function(data) {
                  $('#container').highcharts('Map', {
                          series: [{
                              name: 'States',
                              data: data,
                              mapData: Highcharts.maps['countries/us/us-all'],
                              joinBy: ['hc-key', 'code'],
                              type: 'map',
                          }],
                          });
                  });
          }
          $(document).ready(create_chart);
  </code></pre>
  
  <p><strong>Sample of the main map data (states.json)</strong></p>
  
  <pre><code>[
      {
          "drilldown": "ak",
          "code": "us-ak",
          "value": "1"
      },
      {
          "drilldown": "al",
          "code": "us-al",
          "value": "22"
      },
      {
          "drilldown": "ar",
          "code": "us-ar",
          "value": "7"
      },
  ...
  ]
  </code></pre>
  
  <p>I get bugged down on including the data from my second JSON file which holds the drilldown items. Here is the format: </p>
  
  <p><strong>Sample of drilldow data (counties.json)</strong></p>
  
  <pre><code>[
      {
          "code": "us-de-005",
          "name": "Sussex County, DE",
          "value": "2"
      },
      {
          "code": "us-al-03",
          "name": "Baldwin County, AL",
          "value": "1"
      },
      {
          "code": "us-al-39",
          "name": "Covington County, AL",
          "value": "2"
      },
  ...
  ]
  </code></pre>
  
  <p>I assume that I need to adjust the following line in the example that currently set to dummy random data:</p>
  
  <p><strong>Lines 46-51</strong></p>
  
  <pre><code>                    data = Highcharts.geojson(Highcharts.maps[mapKey]);
                      // Set a non-random bogus value
                      $.each(data, function (i) {
                          this.value = i;
                      });
  </code></pre>
  
  <p>Any ideas on how I can insert my json data instead of bogus data?</p>