title: Data Not Showing in Highcharts
body: <p>I'm attempting to combine a couple of different chart demos from Highcharts.</p>
  
  <p>My examples are: <a href="http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/data-class-two-ranges/" rel="nofollow">Data classes and popup</a> and <a href="http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/us-data-labels/" rel="nofollow">Small US with data labels</a></p>
  
  <p>I want the map from the first with the popup feature of the second. I need to connect the map to my own google spreadsheet but for now I'm just trying to get the data from the first example to work.</p>
  
  <p>This is what I have so far but can't seem to get any data in the map. I thought I had a <code>joinBy</code> problem, and I may still, but when I set <code>joinBy</code> to null I thought "the map items are joined by their position in the array", yet nothing happened.</p>
  
  <p><a href="https://jsfiddle.net/9eq6mydv/" rel="nofollow">https://jsfiddle.net/9eq6mydv/</a></p>
  
  <pre><code>$(function () {
  // Load the data from a Google Spreadsheet
  // https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&amp;hl=en_GB&amp;key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&amp;output=html
  Highcharts.data({
  
      googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc',
      googleSpreadsheetWorksheet: 1,
  
      // custom handler for columns
      parsed: function (columns) {
  
          // Make the columns easier to read
          var keys = columns[0],
              names = columns[1],
              percent = columns[10],
          // Initiate the chart
          options = {
              chart : {
                  renderTo: 'container',
                  type: 'map',
                  borderWidth : 1
              },
  
              title : {
                  text : 'US presidential election 2008 result'
              },
  
              subtitle: {
                  text: 'Source: &lt;a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
                      '_2008#Election_results"&gt;Wikipedia&lt;/a&gt;'
              },
  
              mapNavigation: {
                  enabled: true,
                  enableButtons: false
              },
  
              legend: {
                  align: 'right',
                  verticalAlign: 'top',
                  x: -100,
                  y: 70,
                  floating: true,
                  layout: 'vertical',
                  valueDecimals: 0,
                  backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
              },
  
              colorAxis: {
                  dataClasses: [{
                      from: -100,
                      to: 0,
                      color: '#C40401',
                      name: 'McCain'
                  }, {
                      from: 0,
                      to: 100,
                      color: '#0200D0',
                      name: 'Obama'
                  }]
              },
  
              series : [{
                  data : data,
                  dataLabels: {
                      enabled: true,
                      color: '#FFFFFF',
                      format: '{point.code}',
                      style: {
                          textTransform: 'uppercase'
                      }
                  },
                  mapData: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']),
                  joinBy: keys,
                  name: 'Democrats margin',
                  point: {
                      events: {
                          click: pointClick
                      }
                  },
                  tooltip: {
                      ySuffix: ' %'
                  },
                  cursor: 'pointer'
              }, {
                  type: 'mapline',
                  data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
                  color: 'silver'
              }]
          };
  
          /**
           * Event handler for clicking points. Use jQuery UI to pop up
           * a pie chart showing the details for each state.
           */
          function pointClick() {
              var row = this.options.row,
                  $div = $('&lt;div&gt;&lt;/div&gt;')
                      .dialog({
                          title: this.name,
                          width: 400,
                          height: 300
                      });
  
              window.chart = new Highcharts.Chart({
                  chart: {
                      renderTo: $div[0],
                      type: 'pie',
                      width: 370,
                      height: 240
                  },
                  title: {
                      text: null
                  },
                  series: [{
                      name: 'Votes',
                      data: [{
                          name: 'Obama',
                          color: '#0200D0',
                          y: parseInt(columns[3][row], 10)
                      }, {
                          name: 'McCain',
                          color: '#C40401',
                          y: parseInt(columns[4][row], 10)
                      }],
                      dataLabels: {
                          format: '&lt;b&gt;{point.name}&lt;/b&gt; {point.percentage:.1f}%'
                      }
                  }]
              });
          }
  
          // Read the columns into the data array
          var data = [];
          $.each(keys, function (i, key) {
              data.push({
                  key: key,//.toUpperCase(),
                  value: parseFloat(percent[i]),
                  name: names,
                  row: i
              });
          });
  
          // Initiate the chart
          window.chart = new Highcharts.Map(options);
      },
  
      error: function () {
          $('#container').html('&lt;div class="loading"&gt;' +
              '&lt;i class="icon-frown icon-large"&gt;&lt;/i&gt; ' +
              'Error loading data from Google Spreadsheets' +
              '&lt;/div&gt;');
      }
  });
  });
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>I wanted to share with everyone my final solution. Although Ondkloss did a magnificent job answering my question the popup feature still didn't work and this is because I forgot to include the jQuery for the <code>.dialog</code> call. Once I included that I had an empty popup with a <a href="http://www.highcharts.com/errors/17" rel="nofollow">highchart error 17</a>, this is because the highmaps.js code doesn't include the pie chart class. So I had to add the <code>highcharts.js</code> code and include <code>map.js</code> module afterward. You can see my <a href="https://jsfiddle.net/rj22puco/" rel="nofollow">final jsfiddle here</a>.</p>
  
  <p>Thanks again to Ondkloss for the excellent answer!</p>