Как заполнить Google Chart (API) данными из HTTP-вызовов?

0

У меня есть диаграмма, которую я пытаюсь заполнить, которая извлекает данные из нашей системы Abas ERP через некоторые HTTP-вызовы, а затем заполняет указанную диаграмму этими данными. Идея состоит в том, чтобы показывать ежемесячный доход за каждый месяц за предыдущие три года (например: январь 2014, январь 2015, январь 2016, затем февраль 2014-2016 и т.д. И т.д.).

Хотя теперь, когда я смотрю на это (это было пару недель с тех пор, как я работал над этим проектом), у вас может быть массив объектов?

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();

        }
    })
};
  • 0
    Есть ли у вас конкретные проблемы? можно уточнить есть массив объектов ?
  • 0
    График не загружается вообще. Под массивом объектов я имею в виду, вы можете передавать объекты (например, объект с именем Person, который имеет атрибуты возраст, пол, род занятий и т. Д.) В массив, а не просто примитивы.
Показать ещё 1 комментарий
Теги:
http-headers
google-visualization
abas

1 ответ

0
Лучший ответ

Вы загружаете диаграмму, прежде чем извлекать все данные. Вы должны загружать диаграмму только после того, как вы получите все необходимое для заполнения диаграммы.

Один из способов сделать это - использовать javascript-обещания.

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);
});
  • 0
    Да, я решил, что проблема в том, что данные еще не готовы. Хотя раньше никогда не использовал обещания, только callbackResponses.
  • 0
    Однако теперь я получаю эту ошибку, хотя не могу понять, о чем она говорит: Uncaught SyntaxError: missing) после списка аргументов , closed2014Months [i], "no", function (callbackResp) {$ scope.invoice2014Header [i] = callbackResp; resol ();});}););
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню