I need to execute an external JS function that fetches data from a REST endpoint, which takes some time. The problem is that the graph is loading before the data is retrieved and inserted into it.
External JS:
function callEndpoint() {
var sensorID = document.getElementById('sensorList').value;
$.getJSON('http://193.61.148.125:443/SensorCentral/REST/SensorDataRangeNanos/19455746_3_10?startTs=0&endTs=9000000000000000000',
function(data) {
globalData = data;
});
}
My root.js:
angular.module('root',['AngularChart'], function( $routeProvider, $locationProvider ){
$routeProvider.when('/',{
template: '<chart title="Bedroom Sensors" xData="lineChartXData" yData="lineChartYData" xName="Month" yName="Activations" subtitle="Sensor Usage"></chart>',
controller: MainCtrl
})
})
Attempt at using a service:
angular.module('root',['AngularChart'], function( $routeProvider, $locationProvider ){
service('myService', function() {
this.callAlert = function() {
callEndpoint();
}});
$routeProvider.when('/',{
template: '<chart title="Bedroom Sensors" xData="lineChartXData" yData="lineChartYData" xName="Month" yName="Activations" subtitle="Sensor Usage"></chart>',
controller: MainCtrl
})
})
EDIT:
I'm making use of globalData in a function call (popGraph()) within MainCtrl:
function MainCtrl($scope, $http){
callEndpoint();
var data = {"xData": ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat","Sun"],"yData":[{
"name": "Door",
"data": [7.0, 6.9, 9.5, 14.5, popGraph(), 21.5, 25.2]
}, {
"name": "Drawer",
"data": [2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8]
}, {
"name": "Cupbaord 1",
"data": [9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6]
}, {
"name": "Cupboard 2",
"data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0]
}]}
$scope.lineChartYData=data.yData
$scope.lineChartXData=data.xData
}