Highcharts graph does not update with firebase - angularjs

Question

$scope.hhData = $firebaseArray(aRef.orderByChild('ts').startAt('2018-07-02').limitToLast(50));
$scope.hhData.$loaded().then(function () {
$scope.chartSeriesYArray = [];
$scope.chartSeriesXArray = [];
$scope.hhData.$watch(function() {
angular.forEach($scope.hhData, function (value) {
$scope.chartSeriesXArray.push(moment(value.ts).format('MMMM Do YYYY, h:mm:ss'));
$scope.chartSeriesYArray.push(parseFloat(value.ein));
});
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Half Hourly Energy Consumption'
},
xAxis: {
categories: $scope.chartSeriesXArray,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Energy (kwh)'
}
},
series: [{
name: 'Meter01',
data: $scope.chartSeriesYArray
}]
});
});
});
I wanted to be able to update the data live from Firebase into the chart. However, this code only allows the data to be updated once at the start and it never updates itself again. Is there any way to work around this? - tried the $interval method as suggested but it didn't work :(
Update: I managed to do so with $watch. However, this now means that my graph will only show when there is data coming in. If there is no data coming in (EG: when you just turn on the system) then no graph will show at all. This there another way around this

Answer 1

Try using the $interval service to retrieve your data after a certain amount of time.
$interval(function() {
$scope.hhData.$loaded().then(function () {
$scope.chartSeriesYArray = [];
$scope.chartSeriesXArray = [];
angular.forEach($scope.hhData, function (value) {
$scope.chartSeriesXArray.push(moment(value.ts).format('MMMM Do YYYY, h:mm:ss'));
$scope.chartSeriesYArray.push(parseFloat(value.ein));
});
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Half Hourly Energy Consumption'
},
xAxis: {
categories: $scope.chartSeriesXArray,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Energy (kwh)'
}
},
series: [{
name: 'Meter01',
data: $scope.chartSeriesYArray
}]
});
});
}, 5000); //this function will run every 5 seconds
*don't forget you also need to add the $interval parameter to your controller, and the interval goes by milliseconds
app.controller('myCtrl',["$scope", "$interval", function($scope, $interval) {
//code goes here
}]);