Google pie chart attempts to draw before API finish loading

Question

I am having some problem with Google chart. Here is the codes for my pie chart:

EDITED PORTION

function displayExistHospital(){
queryTask = new esri.tasks.QueryTask(overlayURLs["moh_hospital_WSA2"] + "/10");
query = new esri.tasks.Query();
query.returnGeometry = false;
query.where = "1=1";
query.outFields = ["*"];

queryTask.execute(query, getExistHospitalData);

document.getElementById("tabsLabel").style.display = "block";
document.getElementById("tabsLabel3").innerHTML = "Age > 60";
document.getElementById("tabsLabel2").innerHTML = "SCPR";
document.getElementById("tabsLabel1").innerHTML = "Total Pop";

}
google.load("visualization", "1", {packages:["corechart"], callback: displayExistHospital});

var arrList = [];
function getExistHospitalData(results){
arrList = [];
var features = results.features;
dojo.forEach(features, function(feature){
var tempArr = [];
    var total_SCPR = feature.attributes.SUM_SUM_TOTAL_SCPR;
    var total_NR = feature.attributes.SUM_SUM_TOTAL_NR;
    var time = feature.attributes.FIRST_E_BREAK;
    tempArr.push(time,total_SCPR,total_NR);
    arrList.push(tempArr);
});

displayExistHospitalGraph(arrList); 
}

function displayExistHospitalGraph(arrListData){
var total_ten = parseInt(arrListData[0][1]) + parseInt(arrListData[0][2]);
var total_tentoFifteen = arrListData[1][1] + arrListData[1][2];
var total_fifteenTwenty = arrListData[2][1] + arrListData[2][2];
var total_greaterTwenty = arrListData[3][1] + arrListData[3][2];

var ppl_num = total_ten + total_tentoFifteen; 
var total_pop = total_ten + total_tentoFifteen + total_fifteenTwenty + total_greaterTwenty;
var dataOne = google.visualization.arrayToDataTable([
    ['Population', 'Percentage'],
    ['<10 mins' +getPercentageInString(total_ten,total_pop) , total_ten],
    ['10 - 15 mins' +getPercentageInString(total_tentoFifteen,total_pop), total_tentoFifteen],
    ['15 - 20 mins' +getPercentageInString(total_fifteenTwenty,total_pop), total_fifteenTwenty],
    ['>20 mins' +getPercentageInString(total_greaterTwenty,total_pop) , total_greaterTwenty],   
]);
var percentage = (((total_ten / total_pop) + (total_tentoFifteen / total_pop)) * 100).toFixed(1);
var title = "Total Population ("+total_pop.toLocaleString()+") Catchment By Drive-Time(Existing)";

var optionsOne = {
    chartArea: {
        width: 350,
        height: 200,
        top: 20, 
        left: 10 
    },
    fontName: 'Arial',
    fontSize: getFontSize(),
isStacked:false,
    title: title,
    width: 400,
height: 200,
    sliceVisibilityThreshold: 0,
    colors:['#004CA8','#437DC4','#96B8E0','#FFFFFF']
};

document.getElementById('hospitalBoxContent').innerHTML= "</br><p ><span style='font-size:2em; color:#00297A; font-family:ArialVerdana; font-weight:bold;'>"+percentage+"% ("+ppl_num.toLocaleString()+")</span > of residents stay within <span style='font-size:2em; color:#00297A; font-family:ArialVerdana; font-weight:bold;'>15-min</span> drive-time to a public hospital </p><br/>";
var chart = new google.visualization.PieChart(document.getElementById('displayHospitalGraph'));
chart.draw(dataOne, optionsOne);

}

The chart works but somehow the percentage on the pie chart was cut off as the picture shown below:

I wonder is there any way to adjust the percentage for example, shift it nearer to the centre so that it won't cut off? I know the reason is because the chart was trying to draw before the API finish loading because this will only occur for the first load. After switching a few charts, the percentage label will be placed nicely inside the chart.

Credits to @asgallant and @Yoann as they helped me to spot the error but after added the codes, it still does not solve.

Thanks in advance.

Answer 1

Please change the last color #FFFFFF to any other color #FFFFFF this color is same as background

Answer 2

Some elements are cut off in you screenshot.

• for the title, you need to increase top in optionsOne.chartArea (and height)

• for the legend, increase width or reduce left in optionsOne.chartArea

• the last pie item is set up on white colors:['#004CA8','#437DC4','#96B8E0','#FFFFFF'], change the font-colour or the last colour to avoid white on white

EDIT :

I created a http://jsfiddle.net/X24Sy/3/ with your code, I cannot reproduce your issue. Do you have any CSS for your container?

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
    function drawChart(){
        var total_ten=15,total_tentoFifteen=35,total_fifteenTwenty=50,total_greaterTwenty=10;
        var ppl_num = total_ten + total_tentoFifteen; 
        var total_pop = total_ten + total_tentoFifteen + total_fifteenTwenty + total_greaterTwenty;
        var dataOne = google.visualization.arrayToDataTable([
            ['Population', 'Percentage'],
            ['<10 mins' +getPercentageInString(total_ten,total_pop) , total_ten],
            ['10 - 15 mins' +getPercentageInString(total_tentoFifteen,total_pop), total_tentoFifteen],
            ['15 - 20 mins' +getPercentageInString(total_fifteenTwenty,total_pop), total_fifteenTwenty],
            ['>20 mins' +getPercentageInString(total_greaterTwenty,total_pop) , total_greaterTwenty],   
        ]);
        var percentage = (((total_ten / total_pop) + (total_tentoFifteen / total_pop)) * 100).toFixed(1);
        var title = "Total Population ("+total_pop.toLocaleString()+") Catchment By Drive-Time(Existing)";

        var optionsOne = {
            chartArea: {
                width: 350,
                height: 200,
                top: 20, 
                left: 10 
            },
            fontName: 'Arial',
            fontSize: 12,
            legend: { alignment: 'center', textStyle: { fontSize: 12} },
            // pieSliceText: 'none',       //label - > show the name on the pie
            tooltip: { 
                trigger: 'focus'// focus -> tooltip will be displayed when the user hovers over an element.
                // none -> tooltip is not displayed 
            }, 
            isStacked:false,
            title: title,
            width: 350,
            height: 200,
            sliceVisibilityThreshold: 0,
            colors:['#004CA8','#437DC4','#96B8E0','#FFFFFF']
        };
        var chart = new google.visualization.PieChart($('#displayHospitalGraph')[0]);
        chart.draw(dataOne, optionsOne);                            
    }

Answer 3

The problem is in this:

function getExistHospitalData(results){
    arrList = [];
    var features = results.features;
    dojo.forEach(features, function(feature){
        var tempArr = [];
        var total_SCPR = feature.attributes.SUM_SUM_TOTAL_SCPR;
        var total_NR = feature.attributes.SUM_SUM_TOTAL_NR;
        var time = feature.attributes.FIRST_E_BREAK;
        tempArr.push(time,total_SCPR,total_NR);
        arrList.push(tempArr);
    });

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(displayExistHospitalGraph(arrList));
}

First, you want to call google.load outside of any other functions. Second, this line:

google.setOnLoadCallback(displayExistHospitalGraph(arrList));

calls your displayExistHospitalGraph function with arrList as an argument, and passes it's return value (null) to google.setOnLoadCallback. This means that your drawing function is being executed immediately, not in the callback. Try this approach instead:

function getExistHospitalData(results){
    arrList = [];
    var features = results.features;
    dojo.forEach(features, function(feature){
        var tempArr = [];
        var total_SCPR = feature.attributes.SUM_SUM_TOTAL_SCPR;
        var total_NR = feature.attributes.SUM_SUM_TOTAL_NR;
        var time = feature.attributes.FIRST_E_BREAK;
        tempArr.push(time,total_SCPR,total_NR);
        arrList.push(tempArr);
    });

    displayExistHospitalGraph(arrList);
}
function init () {
    // get "results" and feed them to getExistHospitalData
    getExistHospitalData(results);
}
google.load("visualization", "1", {packages:["corechart"], callback: init});