using angular directive to draw highchart pie chart but when i am using it in success function it is not working
Question
I am working on single page application project and we are using angularjs and higcharts.js to draw charts. I want to use angularjs directive to draw chart and made a simple example where things are looking okay but when I tried to write code in my ajax call success function then chart is not showing up. I am using this link as sample but I need to set pieData in success function of ajax.
This is my index.html which is working as shell page.
<!DOCTYPE html>
<html ng-app="app" ng-controller="SPAController">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index Page</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/angular.min-1.5.8.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.11.3.js"></script>
<script type="text/javascript" src="~/Scripts/highcharts.js"></script>
<script type="text/javascript" src="~/Scripts/AngularController/DailyController.js"></script>
</head>
<body>
<!-- start: page-wrapper
=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
<div class="container">
<div class="page-wrapper">
<div class="page-body">
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
This is my daily.html view which rendered in index.html(ng-view div)
<div ng-controller="DailyController">
<hc-pie-chart title="Browser usage" data="pieData">Placeholder for pie chart</hc-pie-chart>
</div>
This is my DailyController.js file
app.controller("DailyController", function ($scope, PRServiceNew) {
$scope.GetDataAndDrawChart = function (data) {
$rootScope.showLoader = true;
// CommmonApi is my service which is fetching data from database.
PRServiceNew.GetAllNew("CommonApi", "GetData", data).then(function (d) {
// Here i am getting data from data base and i will send that data to chart but as of now for the simplicity I have written the sample data in $scope.pieData
$scope.pieData = [{
name: "Microsoft Internet Explorer",
y: 56.33
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
$rootScope.showLoader = false;
});
//End-Total AR by Aging
}
});
This is my directive code which is also written in the DailyController.js file at the end.
// Directive for pie charts, pass in title and data only
app.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '@',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: scope.data
}]
});
}
};
})
2 answers
solution1
1 ACCPTED 2016-12-05 12:07:07
Basically you need to update Highcharts with it's API to redraw with new data. To do such, just update your link function with following code. Here i have updated old data of chart after some time interval with new data and it gets reflected into view. Instead of timeout you can use AJAX.
function (scope, element) {
scope.chart = Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
plotOptions: {
// plot options
},
series: [{ data: { /* some data */ } }]
});
scope.updateChart = function() {
scope.chart.update( { series: [{
data: { /* new data */ }
}] }, true );
}
/* Here you can make AJAX call and on success of your AJAX call call this scope.updateChart function */
$timeout( scope.updateChart , 1000 )
}
solution2
0 2016-12-05 11:50:18
I used the same code you have posted and it works perfect for me.
myapp.controller("DailyController", function($scope) {
$scope.GetDataAndDrawChart = function(data) {
// CommmonApi is my service which is fetching data from database.
$scope.pieData = [{
name: "Microsoft Internet Explorer",
y: 56.33
}, {
name: "Chrome",
y: 24.03,
sliced: true,
selected: true
}, {
name: "Firefox",
y: 10.38
}, {
name: "Safari",
y: 4.77
}, {
name: "Opera",
y: 0.91
}, {
name: "Proprietary or Undetectable",
y: 0.2
}]
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.