CODEWITHSUNDEEP
javascriptjquery
ridhi1904
ridhi1904

Reputation: 13

Javascript code when copy pasted in a function, doesnt get called. Otherwise it does. What is the logic here?

Following is the code written to load a chart by calling a function:

//Capture customer and measures values in an array
$("document").ready(function(){
$("button").click(function(){
    Load_PieTest();
    var custArray = new Array();
    var measureArray = new Array();
    var formElements = new Array();
    $("#custSelect >option:selected").each(function(i){
        custArray[i]=$(this).val();
    });
    //alert(custArray);
    $("#measureSelect >option:selected").each(function(j){
        measureArray[j]=$(this).val();
    });
    //alert(measureArray);

    //Convert into suitable JSON
    var length = Math.max(custArray.length, measureArray.length);
    var k;
    for(k=0;k<length;k++){
        //alert("Inside for loop")
        if(typeof(custArray[k])=="undefined"){
            //alert("Undefined customer");
            custArray[k]==null;
        }else if(typeof(measureArray[k])=="undefined"){
            //alert("Undefined measure");
            measureArray[k]==null;
        }
        //alert("About to push into array");
        formElements.push({"customer":custArray[k],"measure":measureArray[k]});

    }
    //alert("outside loop");
    //alert(formElements[0].customer);
    var chartSelect = document.getElementById("typeOfChart");
    var chartOption = chartSelect.options[chartSelect.selectedIndex].value;
    alert(chartOption);

    //Call appropriate AMCharts javascripts
    LoadCharts(chartOption,formElements);
    });
});

LoadCharts is a function that loads a chart based on the selected option. Suppose PieChart is selected. Pie chart should pop up using AMCharts library

When writing the code for making the chart in between the script tag, it works fine. But if written in a function which is getting called, the inner custom methods AmCharts.ready() arent getting called. Following is the code wriitten by me:

function Load_PieTest(){
var chart;
var legend;
var chartData = [{
    country: "Czech Republic",
    litres: 301.90
}, {
    country: "Ireland",
    litres: 201.10
}, {
    country: "Germany",
    litres: 165.80
}, {
    country: "Australia",
    litres: 139.90
}, {
    country: "Austria",
    litres: 128.30
}, {
    country: "UK",
    litres: 99.00
}, {
    country: "Belgium",
    litres: 60.00
}];

alert("yupp");
AmCharts.ready(function () {
    // PIE CHART
    alert("No");
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "country";
    chart.valueField = "litres";
    chart.outlineColor = "#FFFFFF";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;

    // WRITE
    chart.write("chartdiv");
});
}

</script>

same thing when written outside the function in the script tag. works fine.Please tell me why is it happening?

Upvotes: 0

Views: 906

Answers (2)

lyoung
lyoung

Reputation: 427

The answer to your question is that AmCharts.ready waits until the window.onload event has occurred to execute your function. In your example above, where it's not working, it's because the window.onload event has already fired before you called AmCharts.ready. So AmCharts.ready is just waiting indefinitely.

Just remove AmCharts.ready altogether and execute the function code directly. Like this:

}, {
    country: "Belgium",
    litres: 60.00
}];

alert("yupp");
// PIE CHART
alert("No");
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
chart.outlineColor = "#FFFFFF";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;

// WRITE
chart.write("chartdiv");

}

Upvotes: 1

Matthew Wilcoxson
Matthew Wilcoxson

Reputation: 3622

Perhaps the event which triggeres AmCharts.ready() has already fired before you call the function? Does this work:

function Load_PieTest(){
    var chart;
    var legend;
    var chartData = [{
        country: "Czech Republic",
        litres: 301.90
    }, {
        country: "Ireland",
        litres: 201.10
    }, {
        country: "Germany",
        litres: 165.80
    }, {
        country: "Australia",
        litres: 139.90
    }, {
        country: "Austria",
        litres: 128.30
    }, {
        country: "UK",
        litres: 99.00
    }, {
        country: "Belgium",
        litres: 60.00
    }];

    //alert("yupp");

    // PIE CHART
    //alert("No");
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "country";
    chart.valueField = "litres";
    chart.outlineColor = "#FFFFFF";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;

        // WRITE
    chart.write("chartdiv");
}

AmCharts.ready(function () {
    Load_PieTest();
})

I moved the ready to outside, which calls the function.

Upvotes: 0

Related Questions