CODEWITHSUNDEEP
javascripthighcharts
Jacques
Jacques

Reputation: 1709

Highcharts: Data not working correctly from JSON object

I am setting up a bubble chart with the following JSON object: (named donorArray in the code)

{1:{id:1, x:10, y:"88.88", z:"88.88", url:"http://ati.publishwhatyoufund.org/donor/usmcc/"}, 2:{id:2, x:10, y:"87.26", z:"87.26", url:"http://ati.publishwhatyoufund.org/donor/gavi/"}, 3:{id:3, x:10, y:"83.49", z:"83.49", url:"http://ati.publishwhatyoufund.org/donor/ukdfid/"}, 4:{id:4, x:10, y:"83.38", z:"83.38", url:"http://ati.publishwhatyoufund.org/donor/undp/"}, 5:{id:5, x:10, y:"73.81", z:"73.81", url:"http://ati.publishwhatyoufund.org/donor/world-bank-ida/"}, 6:{id:6, x:10, y:"70.65", z:"70.65", url:"http://ati.publishwhatyoufund.org/donor/global-fund/"}, 7:{id:7, x:10, y:"63.70", z:"63.70", url:"http://ati.publishwhatyoufund.org/donor/afdb/"}, 8:{id:8, x:10, y:"62.58", z:"62.58", url:"http://ati.publishwhatyoufund.org/donor/canada/"}, 9:{id:9, x:10, y:"60.38", z:"60.38", url:"http://ati.publishwhatyoufund.org/donor/sweden/"}, 10:{id:10, x:10, y:"57.64", z:"57.64", url:"http://ati.publishwhatyoufund.org/donor/asdb/"}, 11:{id:11, x:10, y:"57.11", z:"57.11", url:"http://ati.publishwhatyoufund.org/donor/iadb/"}, 12:{id:12, x:10, y:"54.24", z:"54.24", url:"http://ati.publishwhatyoufund.org/donor/ececho/"}, 13:{id:13, x:10, y:"52.11", z:"52.11", url:"http://ati.publishwhatyoufund.org/donor/ecdevco/"}, 14:{id:14, x:10, y:"51.14", z:"51.14", url:"http://ati.publishwhatyoufund.org/donor/ecfpi/"}, 15:{id:15, x:10, y:"50.70", z:"50.70", url:"http://ati.publishwhatyoufund.org/donor/denmark/"}, 16:{id:16, x:10, y:"49.37", z:"49.37", url:"http://ati.publishwhatyoufund.org/donor/netherlands/"}}

Here is my actual code:

jQuery(document).ready(function($){ 
    scores = [];
    for(i in donorArray){               
        score = parseFloat(donorArray[i].score);
        score = Math.round(score * 100) / 100;
    }

    var $report= $('#report');
    $report.html('Donor Scoring');

    chart = new Highcharts.Chart({ 
        chart: {
            type: 'bubble',
            renderTo: 'graph',
            backgroundColor: 'transparent',
            events: {
                load: function() {
                    this.renderer.image('http://ati.publishwhatyoufund.org/wp-content/themes/ati/img/new_bg.png', 230, 20, 720, 720).add();  // add image(url, x, y, w, h)
                }       
            }
        },
        plotOptions: {
            bubble: {
                color: 'white',
                marker: {
                    fillColor: 'transparent'
                }
            },
            point: {
                allowPointSelect: false,                    
                events: {

                    mouseOver: function(event) {                                                                                        
                        this.css("border", "1px solid black");                              
                    },
                    mouseOut: function(event) {

                    },
                    click: function(event) {
                        if(!this.selected) {window.open(this.options.url,'_self' );}                                                                                            
                    },
                }
            }
        },  
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },

        yAxis: {
            gridLineColor: 'transparent',                       
            lineColor: 'transparent',          
            labels: {
                enabled: false
            }   
        },
        xAxis: {

            gridLineColor: 'transparent',                       
            lineColor: 'transparent',          
            labels: {
                enabled: false
            },
             offset: 0,
                margin: 0   
        },
        legend: {
            enabled: false
        },
        series: {
                data: donorArray
            }
        });
});

It renders the background and the graph container etc, but no datapoints(bubbles) appear.

Can you spot any obvious errors?

Thanks

Jacques

Upvotes: 0

Views: 589

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

First of all, that part of code is properly wrong:

scores = [];
for(i in donorArray){               
    score = parseFloat(donorArray[i].score);
    score = Math.round(score * 100) / 100;
}

I don't see any score in your donorArray objects, also, it will overwrite score, to become number/string, not adding to the array. Should be rather:

scores = [];
var temp;
for(i in donorArray){               
    temp = parseFloat(donorArray[i].score);
    scores.push(Math.round(temp * 100) / 100);
}

Now, as @Abdul Jabbar said, your data format is just wrong. Doesn't suit Highcharts formats. Working example: http://jsfiddle.net/2ra0gnd0/2/ and code: 

scores = [];
var temp;
var point;
var dataForChart = [];
for(i in donorArray){     
    point = donorArray[i];
    temp = parseFloat(donorArray[i].score);
    scores.push(Math.round(temp * 100) / 100);
    dataForChart.push({
        x:  point.x,
        id: point.id,
        y: parseFloat(point.y),
        z: parseFloat(point.z),
        url: point.url
    });
}

And last thing, to be fixed, is series: 

    series: {
        data: donorArray
    }

Should be of course an array of objects, not an object, so should be:

    series: [{
        data: dataForChart
    }]

Upvotes: 1

Related Questions