Highmaps add and join data from Google Spreadsheet

Question

I can't get my data from Google Spreadsheet to show up on a map I am making with highmaps. I need to make a simple overlay of US map with 2 data points for each state.

Data point #1 - revenue per state

This one will be color-coded overlay going from under 1 Million -> over 5 Million per state

Data point #2 - jobs per state

For this one all I want it to do display job numbers over each state.

Here is my code so far : http://jsfiddle.net/abolotsko/v6KtZ/

$(function () {

    // Initiate the chart
    $('#container').highcharts('Map', {

        data: {
            googleSpreadsheetKey: '0AoIaUO7wH1HwdENPcGVEVkxfUDJkMmFBcXMzOVVPdHc'
        },
        chart: {
            borderWidth: 1
        },

        title: {
            text: 'Title'
        },

        legend: {
            layout: 'horizontal',
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.85)',
            floating: true,
            verticalAlign: 'top',
            y: 25
        },

        title: {
            text: 'Estimated Economic Activity'
        },

        colorAxis: {
            min: 1,
            type: 'logarithmic',
            minColor: '#EEEEFF',
            maxColor: '#000022',
            stops: [
                [0, '#EFEFFF'],
                [0.67, '#4444FF'],
                [1, '#000022']
            ]
        },

        series: [{
            mapData: Highcharts.maps.us,
            name: 'World map',
            joinBy: 'code',
            dataLabels: {
                enabled: true,
                color: 'white',
                format: '{point.code}',
                style: {
                    fontWeight: 'bold',
                    textShadow: '0 0 3px black',
                    textTransform: 'uppercase'
                }
            },
            name: 'Jobs',
            tooltip: {
                pointFormat: '{point.code}: {point.value}'
            }
        }]
    });
});

And here is a link to Google Spreadsheet: https://docs.google.com/spreadsheet/ccc?key=0AsGsaoYbU9OwdG1xeVc0b1Q5STFhQlg2WGFveHRkWnc

SOLVED- FINAL RESULT : http://jsfiddle.net/abolotsko/v6KtZ/ * Thanks Paweł Fus

score 0 · Accepted Answer · answered Apr 15 '14 at 11:46

0

Two thing you need to change/add:

use code with the same manner as in mapData. That means remove toUpperCase() from code, demo: http://jsfiddle.net/v6KtZ/4/
add job property from column, and use that in dataLabels.format, demo: http://jsfiddle.net/v6KtZ/11/

answered Apr 15 '14 at 11:46

Paweł Fus

44,795
3
61
77

Thanks! Where you the one who helped me on Highcharts forum as well? – user3088202 Apr 15 '14 at 16:21
Thank you. Got this thing off my to do list. Next up is moving all our excel spreadsheets to Google docs and hooking them up to Highcharts 3.0 – user3088202 Apr 16 '14 at 12:15

Highmaps add and join data from Google Spreadsheet

1 Answers1