Question

I’m trying to plot data that I get from the DB, but I have no luck with figuring how to deal with the json array and pass it to the plotting plugin (jvectorMap)

Here is the structure of my json array

{
"countries":[
{
"cname":"Albania",
"ccode":"AL",
"name":"John",
"percent":"20"
},
{
"cname":"Austria",
"ccode":"AT",
"name":"Doe",
"percent":"30"
}
]
}

javaScript in HTML

<script>
        var dataC = "<?php echo $mapData?>";
          $(function(){
            $('#world-map').vectorMap({
              map: 'world_mill_en',
              series: {
                regions: [{
                  values: dataC[ccode],
                  scale: ['#C8EEFF', '#0071A4'],
                  normalizeFunction: 'polynomial'
                }]
              },
              onLabelShow: function(e, el, code){
                el.html(el.html()+dataC[ccode]+dataC[name]+dataC[percent]+dataC[cname]);
              }
            });
          });
        </script>

Essentially I would like to have my data plotted based on the ISO code in the ccode key. For instance when i point on the map i would like to see in the marker the data from the name, percentage and the cname field too. Thanks.

Answer 1

var dataC = {
    "countries": [
        {
        "cname": "Albania",
        "ccode": "AL",
        "name": "John",
        "percent": "20"},
    {
        "cname": "Austria",
        "ccode": "AT",
        "name": "Doe",
        "percent": "30"}
    ]
};

//---------------------------------------------------------------------------
// The data for the jVectorMap is expected to be an object with 
// member variables for each country code and an associated value. 
// You need to convert your `dataC` data into that format.
//---------------------------------------------------------------------------
var countryData = []; 
//for each country, set the code and value
$.each(dataC.countries, function() {
    countryData[this.ccode] = this.percent;
});

$(function() {
    $('#world-map').vectorMap({
        map: 'world_mill_en',
        series: {
            regions: [{
                values: countryData, //load the data
                scale: ['#C8EEFF', '#0071A4'],
                normalizeFunction: 'polynomial'}]
        },
        //-----------------------------------------------
        // changed to onRegionLabelShow from onLabelShow
        //-----------------------------------------------
        onRegionLabelShow: function(e, el, code) {
            //search through dataC to find the selected country by it's code
            var country = $.grep(dataC.countries, function(obj, index) {
                return obj.ccode == code;
            })[0]; //snag the first one
            //only if selected country was found in dataC
            if (country != undefined) { 
                el.html(el.html() + 
                        "<br/><b>Code: </b>" +country.ccode + 
                        "<br/><b>Name: </b>" + country.name + 
                        "<br/><b>Percent: </b>" + country.percent + 
                        "<br/><b>Country Name: </b>"+ country.cname);
            }
        }
    });
});​