Generating Different Colours On the JVectorMap Regions Based On The Range Of Values

Question

I'm using JVectorMap for creating World Map..

As part of my JVectorMap im displaying on the regions CountryName with Population..

My Question is:

How to show differrent colours for the regions (countries) based on population ranges.

Ex: For 1-1000 population i have to show red colour. For 1000-5000 population i have to show blue colour.

I'm using code like this.But it is not displaying different colours based on the range of population

var mapData = {
  "AF": 1000,
  "AL": 5000,
  "DZ": 20000,
  ...
};

     try{
                        $('#id').vectorMap(
                        {
                            map : 'world_mill_en',
                            series : {
                                regions : [ {
                                    initial : {
                                        fill : 'white',
                                        "fill-opacity" : 1,
                                        stroke : 'none',
                                        "stroke-width" : 0,
                                        "stroke-opacity" : 1
                                    },
                                    hover : {
                                        "fill-opacity" : 0.8
                                    },
                                    selected : {
                                        fill : 'yellow'
                                    },
                                    selectedHover : {},
                                    values : mapData,
                                    scale : [  '#C8EEFF', '#0071A4' ],
                                    normalizeFunction : 'polynomial'
                                } ]
                            },
                            onRegionLabelShow : function(e, el, code) {
                                el.html(el.html()+' (Population - '+mapData[code]+')');
                            }
                        });
            }
    catch(err){
            alert(err);
        }

Can any one help me in displaying differnt colours for the regions based on the range of population......? Thanks in advance..

Answer 1

Create a JSON with count and color codes like this according to your regions and colors.

var colorData = {
     "1" : "#C8EEFF", 
     "2" : "#0071A4",
     "3" : "#C8EEFF", 
     "4" : "#0071A4",
     "5" : "#C8EEFF", 
     "6" : "#0071A4"
}

and pass this JSON to the scale : colorData. Hope it helps you.