How do I populate a Google Chart (API) with data from HTTP calls?

Question

I have a chart I'm trying to populate that pulls data from our Abas ERP system via some HTTP calls and then populates said chart with that data. The idea is to show monthly revenue for each month in the previous three years (for instance: Jan 2014, Jan 2015, Jan 2016, then Feb 2014-2016, etc, etc)

Although now that I look at it (it's been a couple weeks since I worked on this project) can you have an array of objects?

function loadArray() {

    var i = 0;

    var beginning2014Months = ["20140101", "20140201", "20140301", "20140401", "20140501", "20140601", "20140701", "20140801", "20140901", "20141001", "20141101", "20141201"];
    var closing2014Months = ["20140131", "20140228", "20140331", "20140430", "20140531", "20140630", "20140731", "20140831", "20140930", "20141031", "20141130", "20141231"];
    var beginning2015Months = ["20150101", "20150201", "20150301", "20150401", "20150501", "20150601", "20150701", "20150801", "20150901", "20151001", "20151101", "20151201"];
    var closing2015Months = ["20150131", "20150228", "20150331", "20150430", "20150531", "20150630", "20150731", "20150831", "20150930", "20151031", "20151130", "20151231"];
    var beginning2016Months = ["20160101", "20160201", "20160301", "20160401", "20160501", "20160601", "20160701", "20160801", "20160901", "20161001", "20161101", "20161201"];
    var closing2016Months = ["20160131", "20160228", "20160331", "20160430", "20160531", "20160630", "20160731", "20160831", "20160930", "20161031", "20161130", "20161231"];



    for (i = 0; i < 12; i++) {


        runOWSLS("Invoice", beginning2014Months[i], closing2014Months[i], "no", function (callbackResp) {
            $scope.invoice2014Header[i] = callbackResp;


        });

        runOWSLS("Invoice", beginning2015Months[i], closing2015Months[i], "no", function (callbackResp) {
            $scope.invoice2015Header[i] = callbackResp;


        });

        runOWSLS("Invoice", beginning2016Months[i], closing2016Months[i], "no", function (callbackResp) {
            $scope.invoice2016Header[i] = callbackResp;


        });


    };



};







google.charts.load('current', {
    packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawMaterial);


function drawMaterial() {


    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Revenue 2014');
    data.addColumn('number', 'Revenue 2015');
    data.addColumn('number', 'Revenue 2016');

    data.addRows([
    [{
            v: [8, 0, 0],
            f: 'January'
        }, $scope.invoice2014Header[0].ynofreight, $scope.invoice2015Header[0].ynofreight, $scope.invoice2016Header[0].ynofreight],
    [{
            v: [9, 0, 0],
            f: 'Febuary'
        }, $scope.invoice2014Header[1].ynofreight, $scope.invoice2015Header[1].ynofreight, $scope.invoice2016Header[1].ynofreight],
    [{
            v: [10, 0, 0],
            f: 'March'
        }, 3, 1, 1],
    [{
            v: [11, 0, 0],
            f: 'April'
        }, 4, 2.25, 1],
    [{
            v: [12, 0, 0],
            f: 'May'
        }, 5, 2.25, 1],
    [{
            v: [13, 0, 0],
            f: 'June'
        }, 6, 3, 1],
    [{
            v: [14, 0, 0],
            f: 'July'
        }, 7, 4, 1],
    [{
            v: [15, 0, 0],
            f: 'August'
        }, 8, 5.25, 1],
    [{
            v: [16, 0, 0],
            f: 'September'
        }, 9, 7.5, 1],
    [{
            v: [17, 0, 0],
            f: 'October'
        }, 10, 10, 1],
    [{
            v: [18, 0, 0],
            f: 'November'
        }, 11, 11, 1],
    [{
            v: [19, 0, 0],
            f: 'December'
        }, 12, 12, 1],
  ]);

    var options = {
        title: 'Monthly Revenue',
        hAxis: {
            title: 'Month',
            //format: 'h:mm a',
            viewWindow: {
                min: [0, 30, 0],
                max: [600, 30, 0]
            }
        },
        vAxis: {
            title: 'Revenue per year'
        }
    };

    var material = new google.charts.Bar(document.getElementById('barchart_div'));
    material.draw(data, options);
}







$scope.runAll = function () {

    $scope.$watch("unityToken", function () {
        if (!$scope.unityToken) {
            console.log("auto-login");
            login();
        } else {
            loadArray();

        }
    })
};

Answer 1

You are loading a chart before you retrieve all the data. You should load chart only after you retrieve everything you need to populate your chart.

One way to do this is to use javascript promises.

var promiseArray = [];
for (i = 0; i < 12; i++) {
    promiseArray.push(
        new Promise(function(resolve,reject){
            runOWSLS("Invoice", beginning2014Months[i], closing2014Months[i], "no", function (callbackResp) {
                $scope.invoice2014Header[i] = callbackResp;
                resolve();
            });
        })
    );

    promiseArray.push(
        new Promise(function(resolve,reject){
            runOWSLS("Invoice", beginning2015Months[i], closing2015Months[i], "no", function (callbackResp) {
                $scope.invoice2015Header[i] = callbackResp;
                resolve();
            });
        })
    );

    promiseArray.push(
        new Promise(function(resolve,reject){
            runOWSLS("Invoice", beginning2016Months[i], closing2016Months[i], "no", function (callbackResp) {
                $scope.invoice2016Header[i] = callbackResp;
                resolve();
            });
        })
    );
} // end of for loop - there would be 12*3 = 36 ajax calls.

Promise.all(promiseArray).then(function(){
  google.charts.setOnLoadCallback(drawMaterial);
});