I am currently utilizing Morris charts with Angular to present graphical reports that fetch data from our backend server via a REST API call.
Although I can see the retrieved data in the console log, it is not being displayed in the charts. Upon investigation, I discovered that the directive barchart loads before the API call, resulting in the display of data available in $scope.myModel.
I am attempting to determine if there is a way in Angular to reload the directive when data is received from the API call. Can anyone assist me with this?
Below is the code for generating the Bar Chart:
This is my code
var sampleApp = angular.module('sample',[]);
sampleApp.directive('barchart', function() {
return {
// required to make it work as an element
restrict: 'E',
template: '<div></div>',
replace: true,
// observe and manipulate the DOM
link: function($scope, element, attrs) {
var data = $scope[attrs.data],
xkey = $scope[attrs.xkey],
ykeys= $scope[attrs.ykeys],
labels= $scope[attrs.labels];
Morris.Bar({
element: element,
data: data,
xkey: xkey,
ykeys: ykeys,
labels: labels
});
}
};
});
sampleApp.controller('sampleController',function($scope, $http){
$scope.values = []
$scope.xkey = 'range';
$scope.ykeys = ['total_tasks', 'total_overdue'];
$scope.labels = ['Total Tasks', 'Out of Budget Tasks'];
$http.get('http://api.*******.com/api/getAppID/?parameter=whatsapp').success( function(res) {
if(!res.error) {
if(res.status==1) res.status=true
else res.status=false
$scope.values[0] = res.metrices.total_shares
$scope.values[1] = res.metrices.unique_share_count
$scope.values[2] = res.metrices.total_clicks
$scope.values[3] = res.metrices.total_downloads
}
})
$scope.myModel = [
{ range: 'January', total_tasks: $scope.values[0], total_overdue: 5 },
{ range: 'January', total_tasks: $scope.values[1], total_overdue: 8 },
{ range: 'January', total_tasks: $scope.values[2], total_overdue: 1 },
{ range: 'January', total_tasks: $scope.values[3], total_overdue: 6 }
];
});
HTML PART:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<script src="js/sample.js"></script>
<meta charset=utf-8 />
</head>
<body ng-app="sample" ng-controller="sampleController">
<barchart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></barchart>
</body>