CODEWITHSUNDEEP
javascriptjqueryajaxjvectormap
Bram
Bram

Reputation: 11

loading JSON data dynamically vs hardcoded in JVectormap - Uncaught TypeError: Cannot read property 'element' of undefined

I am using JVectormap and I'm trying to load data dynamically through AJAX. My AJAX calls a PHP script which returns a resultstring. Example response : {"US":"29.84","BE":"24.52","FR":"21.42","GB":"15.66"}

When I use console.log(dataset) I see the exact correct string as the example above in the console, but data is not loaded on the geo chart and I get the error "Uncaught TypeError: Cannot read property 'element' of undefined"

When I copy paste the value from console and add a line in my code that states var dataset = {"US":"29.84","BE":"24.52","FR":"21.42","GB":"15.66"}; then the chart is loaded perfectly.

So when I hardcode the value all works fine, but when I use the dynamically returned dataset it doesn't work, although they are exact copies of eachother.

My Javascript code without the hardcoded value (this one results in empty map and the above mentionned error in console)

Information : This function RenderChart(dataset) is called from another part which loads the AJAX data in "dataset". So dataset contains the string with country codes and values as you can also see with console.log(dataset);

function RenderChart(dataset)
{
    console.log(dataset);
        $('#world-map').vectorMap({
            map: 'world_mill',
            backgroundColor: "#3C454D",
            series: {
                regions: [{
                    values: dataset,
                    scale: ['#25823b', '#fce853', '#e01402'],
                    normalizeFunction: 'polynomial'
                }]
            },
            onRegionTipShow: function(e, el, code){
                el.html(el.html()+' (Threat - '+dataset[code]+'%)');
            }
        });
}

My code WITH the hardcoded value (this one results in a good chart)

function RenderChart(dataset)
{
    console.log(dataset);
    dataset = {"US":"29.84","BE":"24.52","FR":"21.42","GB":"15.66","DE":"2.81"};
        $('#world-map').vectorMap({
            map: 'world_mill',
            backgroundColor: "#3C454D",
            series: {
                regions: [{
                    values: dataset,
                    scale: ['#25823b', '#fce853', '#e01402'],
                    normalizeFunction: 'polynomial'
                }]
            },
            onRegionTipShow: function(e, el, code){
                el.html(el.html()+' (Threat - '+dataset[code]+'%)');
            }
        });
}

Upvotes: 0

Views: 469

Answers (1)

Bram
Bram

Reputation: 11

I've solved it myself but thought I'd add the solution here for other people perhaps having the same issue.

Although the PHP code returns a json_encode() value, it doesn't work. You have to explicitely define dataType: "json" inside the AJAX request.

Upvotes: 1

Related Questions