Data Visualization with jVectorMap/JQVMap

Question

I'am trying to make a Jquery Vector Map (for this i tryied out jVectorMap and now i'am "playing" around with JQVMap but i simply can't make any data visualization. I simply want to include my "accountbalanceData" and visualize the data like -20(%) = "red", -10(%) = "lightred", 0(%) = "blue" etc. But what i get is an "empty map" (hover and onclick work).

Head

<!-- jQuery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<!-- JQVMap -->
    <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.min.js"></script>
    <!--<script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.js"></script>-->
    <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.world.js"></script>
    <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.sampledata.js"></script>
    <script type="text/javascript" src="/newsite/js/jvectormap/gdp-data.js"></script>

HTML:

    <div id="vmap" style="width: 600px; height: 400px;"></div>

Data

I took this data from http://www.imf.org where i queried for "current account balance" in "percent of GDP" an for all 184 Countries. But it wont work with accountbalanceData (i guess because of the minus).

      var accountbalanceData = {
      "AF": -1.086,
      "AL": -13.237,
      "DZ": 9.984,
      "AO": 9.717,
      "AG": -13.686,
      "AR": -0.701,
      "AM": -11.043,
      "AU": -4.614,
      "AT": 1.374,
      "AZ": 21.789,
        ...};

      var gdpData = {
       "OM": 53.78,
       "PK": 174.79,
       "PA": 27.2,
       "PG": 8.81,
       "PY": 17.17,
       "PE": 153.55,
       "PH": 189.06,
       "PL": 438.88,
       "PT": 223.7,
        ...};

CSS:

    .jqvmap-label
    {
        position: absolute;
        display: none;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background: #292929;
        color: white;
        font-family: sans-serif, Verdana;
        font-size: smaller;
        padding: 3px;
    }

    .jqvmap-zoomin, .jqvmap-zoomout
    {
        position: absolute;
        left: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background: #000000;
        padding: 3px;
        color: white;
        width: 10px;
        height: 10px;
        cursor: pointer;
        line-height: 10px;
        text-align: center;
    }

    .jqvmap-zoomin
    {
        top: 10px;
    }

    .jqvmap-zoomout
    {
        top: 30px;
    }

    .jqvmap-region
    {
      cursor: pointer;
    }

    .jqvmap-ajax_response
    {
      width: 100%;
      height: 500px;
    }

Javascript:

    <script>
    $(function(){
        var max = 0,
            min = Number.MAX_VALUE,
            cc,
            startColor = [200, 238, 255],
            endColor = [0, 100, 145],
            mycolors = {},
            hex;

            //find maximum and minimum values
            for (cc in sample_data)
            {
                if (parseFloat(sample_data[cc]) > max)
                {
                    max = parseFloat(sample_data[cc]);
                }
                if (parseFloat(sample_data[cc]) < min)
                {
                    min = parseFloat(sample_data[cc]);
                }
            };

            //set colors according to values of GDP
            for (cc in sample_data)
            {
                if (sample_data[cc] > 0)
                {
                    mycolors[cc] = '#';
                    for (var i = 0; i<3; i++)
                    {
                        hex = Math.round(startColor[i]
                            + (endColor[i]
                            - startColor[i])
                            * (gdpData[cc] / (max - min))).toString(16);

                        if (hex.length == 1)
                        {
                            hex = '0'+hex;
                        }

                        mycolors[cc] += (hex.length == 1 ? '0' : '') + hex;
                    }
                }
            };

//Map initializing

            jQuery('#vmap').vectorMap({
                map: 'world_en',
                //backgroundColor: '#a5bfdd', //Color of the background ("Ocean's")
                borderColor: '#818181', //Color of the country borders
                borderOpacity: 0.15, //Border thickness
                borderWidth: 1,
                //color: 'white', //Country color
                series: {
                    regions: [{
                        values: sample_data,
                        scale: ['#C8EEFF', '#0071A4'],
                        normalizeFunction: 'polynomial',
                    }]
                },
                colors: mycolors,
                hoverOpacity: 0.7,
                hoverColor: false,
                //scaleColors: ['#b6d6ff', '#005ace'],
                onRegionClick: function(element, code, region)
                {
                var message = 'You clicked "'
                    + region
                    + '" which has the code: '
                    + code.toUpperCase();

                alert(message);
                }
            });
    });
    </script>

Answer 1

You can follow the documentation for jvectormap here:

jvectormap documentation

Your code will look like this:

$('#vmap').vectorMap({
            map: 'world_mill_en',
            regionStyle: //your initial values (including hover)
            series: {
                regions: [{
                    values: accountbalanceData,
                    scale: ['#C8EEFF', '#0071A4'],
                    normalizeFunction: 'polynomial',
                }]
            },
            onRegionClick: function(element, code, region)
            {
            var message = 'You clicked "'
                + region
                + '" which has the code: '
                + code.toUpperCase();

            alert(message);
            }
        });