How to push datapoints in real time AmCharts - angularjs

Question

I am working on a real time AmCharts in my AngularJS application and I wanted to know how I could push datapoints into the chart. The following is the code in my controller:
$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 );
});
My chart is getting data from a web service. The web service returns 10 items and each item availability should be updated in real time. I am using itemId and availability in the chart. Initially I am able to load the data in the chart. But when the chart shifts one value how should I push the new value. Can anyone let me know how I could achieve this functionality.

Answer 1

I was able to achieve this by making the following changes in my code. I added the following function and called this function in the set timeout function. So for every shift in the chart one value will be pushed into the chart.
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 );