Assigning values to global variable on click of button for Javascript

Question

Would like to ask something pertaining to javascript. I have a html template and a button (b1) where onclick it will assign a array to the variable tempdata. When I try to do alert(tempdata) outside the .onclick function, nothing happens(i tried doing alert (tempdata) inside the onclick function and it works though). However,the reason why I would need to use the variable tempdata outside the onclick function is because I need to pass the tempdata array to the data tag for the var config variable

So my question is how do i set tempdata array and pass it to the data tag?

var cusomernames=[];

var myObj = [{
"region":"APAC",
"customers": [
    { "name":"A", "count":100 },
    { "name":"B", "count":35 },
    { "name":"C", "count":90 }
]
},
{
"region":"ASEAN",
"customers": [
    { "name":"A", "count":30 },
    { "name":"B", "count":35 },
    { "name":"C", "count":90 }
]
}

];


function myFunction() {
    var datasum=[];  
    for(var i = 0; i < myObj.length; i++) {
        if(myObj[i].region == "APAC"){
            for(var p=0;p<3;p++){
                datasum.push(myObj[i].customers[p].count);
                cusomernames.push(myObj[i].customers[p].name);
            }
        }

    }

    return datasum;        

}



window.onload = function() {
    var b1=document.getElementById('b1');
    var tempData=[];
    b1.onclick=function(){  
        tempData=myFunction();
        alert(tempData);
    }

    var config = {
        type: 'funnel',
        data: {
            datasets: [{
                data: tempData,
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }],
            labels: ["A","B","C"]
        },
        options: {
            responsive: true,
            sort: 'desc',
            legend: {
                position: 'top'
            },
            title: {
                display: true,
                text: 'Chart.js Funnel Chart'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };
    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myDoughnut = new Chart(ctx, config);



};

razorxan · Accepted Answer · 2017-03-11 05:04:39Z

3

Can't you just set the config attribute directly without using a temp variable?

//....
var config = {...}
window.onload = function () {
    b1.onclick(function () {
        config.datasets[0].data = myFunction();
    });
    //Chart stuff
}

answered Mar 11, 2017 at 5:04

razorxan

5161 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam Patterson · Accepted Answer · 2017-03-11 04:42:14Z

Try:

tempData.push(myFunction());

Instead of:

tempData=myFunction();

Edit: I think both methods above should work just fine, I think it's a matter of timing. I think you need to put config in the scope of the event listener. Like:

b1.onclick=function(){  
    tempData=myFunction();
    alert(tempData);

    var config = {
        type: 'funnel',
        data: {
        datasets: [{
            data: tempData,
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
                ]
            }],
           labels: ["A","B","C"]
        },
        options: {
            responsive: true,
            sort: 'desc',
            legend: {
                position: 'top'
            },
            title: {
                display: true,
                text: 'Chart.js Funnel Chart'
            },
            animation: {
                animateScale: true,
                animateRotate: true
           }
        }
    }; 
 }

Collectives™ on Stack Overflow

Assigning values to global variable on click of button for Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related