데이터 포인트를 실시간으로 푸는 방법 AmCharts

Question

저는 AngularJS 어플리케이션에서 AmCharts를 실시간으로 작업하고 있으며 데이터 포인트를 차트에 밀어 넣을 수있는 방법을 알고 싶었습니다. 내 컨트롤러의 코드는 다음과 같습니다.

$http.get(hostNameService.getHostName()+"/dashboard/itemValue") 
      .then(function (response) {$scope.item = response.data.items; 
       function generateChartData(){ 
        var chartData = []; 
        for (var i = 0; i < $scope.item.length; i++) { 
         var itemId = $scope.item[i].itemId; 
         var avail = $scope.item[i].itemAvailability; 

         chartData.push({ 
          "itemId": itemId, 
          "avail": avail 
         }); 
        } 

        return chartData; 
       } 

       /** 
       * Create the chart 
       */ 
       var chart = AmCharts.makeChart("toolAvailability", { 
        "type": "serial", 
        "theme": "light", 
        "zoomOutButton": { 
         "backgroundColor": '#000000', 
         "backgroundAlpha": 0.15 
        }, 
        "dataProvider": generateChartData(), 
        "categoryField": "itemId", 
        "graphs": [ { 
         "id": "g1", 
         "valueField": "avail", 
         "bullet": "round", 
         "bulletBorderColor": "#FFFFFF", 
         "bulletBorderThickness": 2, 
         "lineThickness": 2, 
         "lineColor": "#b5030d", 
         "negativeLineColor": "#0352b5", 
         "hideBulletsCount": 50 
        } ], 
        "chartCursor": { 
         "cursorPosition": "mouse" 
        } 
       }) 

       /** 
       * Set interval to push new data points periodically 
       */ 
       // set up the chart to update every second 
       setInterval(function() { 
        // normally you would load new datapoints here, 
        // but we will just generate some random values 
        // and remove the value from the beginning so that 
        // we get nice sliding graph feeling 

        // remove datapoint from the beginning 
        chart.dataProvider.shift(); 

        // for (var i = 0; i < $scope.item.length; i++) { 
        //  var itemId = $scope.item[i].itemId; 
        //  var avail = $scope.item[i].itemAvailability; 
        // } 


        chart.dataProvider.push({// not sure how I can push the json data here 
         date: //need to push the value here, 
         visits: //need to push the value here 
        }); 
        chart.validateData(); 
       }, 1000); 
      }); 

내 차트가 웹 서비스에서 데이터를 가져 오는 중입니다. 웹 서비스는 10 개의 항목을 반환하며 각 항목의 가용성은 실시간으로 업데이트되어야합니다. 차트에서 itemId 및 사용 가능성을 사용하고 있습니다. 처음에는 차트에 데이터를로드 할 수있었습니다. 그러나 차트가 한 값을 이동할 때 어떻게 새로운 값을 밀어 넣어야합니까? 아무도 내가이 기능을 달성 할 수있는 방법을 알려주십시오 수 있습니다.

Answer 1

내 코드에서 다음과 같이 변경하여이 작업을 수행 할 수있었습니다. 다음 함수를 추가하고이 함수를 set timeout 함수에 호출했습니다. 따라서 차트의 모든 이동에 대해 하나의 값이 차트로 푸시됩니다.

function pushNewData(index){ 
         var itemId = $scope.tools[index].itemId; 
         var avail = $scope.tools[index].availability; 

         chart.dataProvider.push({ 
          itemId: itemId, 
          avail: avail 
         }); 

        } 

       var i =0; 
       setInterval(function() { 
        chart.dataProvider.shift(); 
        pushNewData(i); 
        if(i < $scope.items.length - 1){ 
         i++; 
        }else{ 
         i = 0; 
        } 


        chart.validateData(); 
       }, 1000);