3

I'm attempting to combine a couple of different chart demos from Highcharts.

My examples are: Data classes and popup and Small US with data labels

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.

This is what I have so far but can't seem to get any data in the map. I thought I had a joinBy problem, and I may still, but when I set joinBy to null I thought "the map items are joined by their position in the array", yet nothing happened.

https://jsfiddle.net/9eq6mydv/

$(function () {
// Load the data from a Google Spreadsheet
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&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: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
                    '_2008#Election_results">Wikipedia</a>'
            },

            mapNavigation: {
                enabled: true,
                enableButtons: false
            },

            legend: {
                align: 'right',
                verticalAlign: 'top',
                x: -100,
                y: 70,
                floating: true,
                layout: 'vertical',
                valueDecimals: 0,
                backgroundColor: (Highcharts.theme && 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 = $('<div></div>')
                    .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: '<b>{point.name}</b> {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('<div class="loading">' +
            '<i class="icon-frown icon-large"></i> ' +
            'Error loading data from Google Spreadsheets' +
            '</div>');
    }
});
});

UPDATE:

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 .dialog call. Once I included that I had an empty popup with a highchart error 17, this is because the highmaps.js code doesn't include the pie chart class. So I had to add the highcharts.js code and include map.js module afterward. You can see my final jsfiddle here.

Thanks again to Ondkloss for the excellent answer!

1 Answer 1

2

The problem here mostly comes down to the use of joinBy. Also to correct it there are some required changes to your data and mapData.

Currently your joinBy is an array of strings, like ["al", "ak", ...]. This is quite simply not an accepted format of the joinBy option. You can read up on the details in the API documentation, but the simplest approach is to have a attribute in common in data and mapData and then supply a string in joinBy which then joins those two arrays by that attribute. For example:

series : [{
    data : data,
    mapData: mapData,
    joinBy: "hc-key",
]

Here the "hc-key" attribute must exist in both data and mapData.

Here's how I'd create the data variable in your code:

var data = [];
$.each(keys, function (i, key) {
    if(i != 0)
        data.push({
            "hc-key": "us-"+key,
            code: key.toUpperCase(),
            value: parseFloat(percent[i]),
            name: names[i],
            row: i
        });
});

This skips the first key, which is just "Key" (the title of the column). Here we make the "hc-key" fit the format of the "hc-key" in our map data. An example would be "us-al". The rest is just metadata that will be joined in. Note that you were referencing your data in the options prior to filling it with data, so this has to be moved prior to this.

This is how I'd create the mapData variable in your code:

var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

// Process mapdata
$.each(mapData, function () {
    var path = this.path,
        copy = { path: path };

    // This point has a square legend to the right
    if (path[1] === 9727) {

        // Identify the box
        Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);

        // Place the center of the data label in the center of the point legend box
        this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
        this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);

    }
    // Tag it for joining
    this.ucName = this.name.toUpperCase();
});

The first part is your "standard map data". The rest is to correctly center the labels for the popout states, and gotten directly from the example.

And voila, see this JSFiddle demonstration to witness your map in action.

I suggest doing some console.log-ing to see how data and mapData have the hc-key in common and that leads to the joining of the data in the series.

1
  • WOW! This is a wonderfully thoughtful answer. Thanks for you help. I don't just have a solution I have an understanding of what I am doing.
    – Beaunus
    May 11, 2015 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.