Как нажимать datapoints в реальном времени AmCharts

Question

Я работаю над AmCharts в реальном времени в своем приложении AngularJS, и я хотел знать, как я мог бы выталкивать данные в диаграмму. Ниже приведен код в моем контроллере:

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