Wie kann ich ein Google-Diagramm (API) mit Daten aus HTTP-Aufrufen füllen?

Question

Ich habe ein Diagramm, das ich ausfüllen möchte, das Daten von unserem Abas-ERP-System über einige HTTP-Aufrufe holt und dann besagtes Diagramm mit diesen Daten bestückt. Die Idee ist, monatliche Einnahmen für jeden Monat in den letzten drei Jahren zu zeigen (zum Beispiel: Jan 2014, Jan 2015, Jan 2016, dann Feb 2014-2016, usw.)

Obwohl jetzt, wo ich es ansehe (Es ist ein paar Wochen her, seit ich an diesem Projekt gearbeitet habe) Kannst du eine Reihe von Objekten haben?

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

Sie laden ein Diagramm, bevor Sie alle Daten abrufen. Sie sollten das Diagramm erst laden, nachdem Sie alle Daten abgerufen haben, die Sie zum Auffüllen Ihres Diagramms benötigen.

Ein Weg, dies zu tun ist, Javascript Versprechen zu verwenden.

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