HTTP 차트의 데이터로 Google 차트 (API)를 채우려면 어떻게해야합니까?

Question

일부 HTTP 호출을 통해 Abas ERP 시스템의 데이터를 가져온 채 채우려는 차트가 있고 차트에 해당 데이터가 채워집니다. 아이디어는 지난 3 년 동안 매월 월별 수익을 표시하는 것입니다 (예 : 2014 년 1 월, 2015 년 1 월, 2016 년 1 월, 2014 년 2 월 20 일 등)

이제는 이 프로젝트를 작업 한 이후로 2 주 정도 걸렸습니다.) 개체 배열을 사용할 수 있습니까?

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

모든 데이터를 검색하기 전에 차트를로드하고 있습니다. 차트를 채워야하는 모든 항목을 검색 한 후에 만 ​​차트를로드해야합니다.

이렇게하는 한 가지 방법은 자바 스크립트 약속을 사용하는 것입니다.

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