CODEWITHSUNDEEP
highcharts
Geert
Geert

Reputation: 239

How to add data to a custom HighChart's HighMaps map? joinBy?

I created a custom map using Inkscape as described on the HighMaps docs pages at: http://www.highcharts.com/docs/maps/custom-maps

Everything up to step 16 seems to go smoothly.

Step 16 says that the only remaining thing to do is to add data or use the MapData option and this is where I am struggling.

How does one link the custom shapes in the map to data points? Using the shape name in a JoinBy?

http://jsfiddle.net/GeertClaes/aWJ2D/

$(function () {

    // Initiate the chart
    $('#container').highcharts('Map', {
        title:{text:''},
        subTitle:{text:''},
        credits:{enabled:false},
        legend:{enabled: false},

        series:         
        [
            {
                "type": "map",
                "data": [
                    {
                        "name": "Status1-CurrentPeriod",
                        "path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z"
                    },
                    {
                        "name": "Status1-Period-1",
                        "path": "M0,-684,1,-633C15,-635,26,-646,26,-658,26,-672,14,-682,0,-684z"
                    },
                    {
                        "name": "Status2-CurrentPeriod",
                        "path": "M178,-695,178,-682C179,-682,180,-683,181,-683,193,-683,203,-672,203,-658,203,-645,193,-634,181,-634,180,-634,180,-634,179,-634L179,-622,286,-622,285,-694,178,-695z"
                    },
                    {
                        "name": "Status2-Period-1",
                        "path": "M178,-684,179,-633C193,-635,204,-646,204,-658,204,-672,193,-682,178,-684z"
                    },
                    {
                        "name": "Status3-CurrentPeriod",
                        "path": "M357,-695,357,-682C358,-682,359,-683,360,-683,372,-683,382,-672,382,-658,382,-645,372,-634,360,-634,359,-634,359,-634,358,-634L358,-622,465,-622,464,-694,357,-695z"
                    },
                    {
                        "name": "Status3-Period-1",
                        "path": "M357,-684,358,-633C372,-635,383,-646,383,-658,383,-672,372,-682,357,-684z"
                    },
                    {
                        "name": "Status4-CurrentPeriod",
                        "path": "M535,-695,535,-682C536,-682,537,-683,538,-683,550,-683,560,-672,560,-658,560,-645,550,-634,538,-634,537,-634,536,-634,536,-634L536,-622,643,-622,642,-694,535,-695z"
                    },
                    {
                        "name": "Status4-Period-1",
                        "path": "M535,-684,536,-633C550,-635,561,-646,561,-658,561,-672,549,-682,535,-684z"
                    },
                    {
                        "name": "Status5-CurrentPeriod",
                        "path": "M713,-695,713,-682C714,-682,715,-683,716,-683,728,-683,738,-672,738,-658,738,-645,728,-634,716,-634,715,-634,715,-634,714,-634L714,-622,821,-622,820,-694,713,-695z"
                    },
                    {
                        "name": "Status5-Period-1",
                        "path": "M713,-684,714,-633C728,-635,739,-646,739,-658,739,-672,728,-682,713,-684z"
                    },
                    {
                        "name": "Status6-CurrentPeriod",
                        "path": "M892,-695,892,-682C893,-682,894,-683,895,-683,907,-683,917,-672,917,-658,917,-645,907,-634,895,-634,894,-634,893,-634,893,-634L893,-622,1000,-622,999,-694,892,-695z"
                    },
                    {
                        "name": "Status6-Period-1",
                        "path": "M892,-684,893,-633C907,-635,918,-646,918,-658,918,-672,907,-682,892,-684z"
                    }
                ]
            }
        ]        
    });
});

Upvotes: 1

Views: 6612

Answers (1)

Mark
Mark

Reputation: 108567

There's a couple of ways:

1.) The easiest is to add it into your data using the value property. This is discouraged because it hardcodes the value for the map paths:

"data": [
    {
        "name": "Status1-CurrentPeriod",
        "path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z",
        "value": 6 // <-- here's a numerical value for this path
     }

2.) Seperate your mapData from your data. Map the values in mapData to the values in data with a joinBy. This makes your map paths reusable:

 series: [{
    "type": "map",
    "joinBy": ['name', 'name'], // <- mapping 'name' in data to 'name' in mapData
    "data": [
        {
            "name": "Status1-CurrentPeriod",
            "value": 6
        }                    
     ],
    "mapData": [
        {
            "name": "Status1-CurrentPeriod",
            "path": "M0,-695,0,-682C1,-682,2,-683,3,-683,15,-683,25,-672,25,-658,25,-645,15,-634,3,-634,2,-634,1,-634,1,-634L1,-622,108,-622,107,-694,0,-695z"
        }
    ...
}]

Update fiddle here.

Upvotes: 3

Related Questions