How to call d3 pie chart on button click in angularjs? - angularjs

Question

I am trying to display pie chart using d3.js charts in angularjs . As far as the examples i have seen so far implements pie chart on load . But here i want to display pie chart based on the response from service which is called on a button click . Need some guidance to start
my user.html
<h1>Group by users</h1><br>
<select name="users" id="search" ng-model="searchItem">
<option value="">Search By</option>
<option value="admin">admin</option>
<option value="superAdmin">superAdmin</option>
</select>
<button ng-click="search()">Search</button>
<div pie-chart="" style="width:100%;height:460px;" data="data"></div>
my user.js
'use strict';
angular.module('myApp.employee',['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/employee', {
templateUrl: 'employee/employee.html',
controller: 'EmployeeCtrl'
});
}])
.controller('EmployeeCtrl', ['$scope','$http',function($scope,$http) {
$scope.search = function(){
var search=angular.element(document.getElementById("search"));
//var data ;
$scope.searchItem =search.val();
console.log($scope.searchItem);
$http.get("/assets/empDetails.json").then(function(response){
// $scope.empDetail=response.data
console.log(response.data);
console.log();
// function groupBy(arr, prop) {
// const map = new Map(Array.from(arr, obj => [obj[prop], []]));
// arr.forEach(obj => map.get(obj[prop]).push(obj));
// return Array.from(map.values());
// }
// console.log(groupBy(response.data,$scope.searchItem ));
var rows = response.data;
var keyName =$scope.searchItem;
groupBy(keyName);
function groupBy(keyName) {
console.log("Group By :: ", keyName)
var occurences = rows.reduce(function (r, row) {
r[row[keyName]] = ++r[row[keyName]] || 1;
return r;
}, {});
var result = Object.keys(occurences).map(function (key) {
return { key: key, value: occurences[key] };
});
console.log(result);
//data = result ;
$scope.data = [
{
name : "Blue",
value : 10,
color : "#4a87ee"
},
{
name : "Green",
value : 40,
color : "#66cc33"
},
{
name : "Orange",
value : 70,
color : "#f0b840"
},
{
name : "Red",
value : 2,
color : "#ef4e3a"
}
];
}
})
}
}])
.directive ("pieChart", function () {
return {
restrict : "A",
scope : {
data : "="
},
link : function (scope, element) {
var width,
height,
radius,
pie,
arc,
svg,
path;
width = element[0].clientWidth;
height = element[0].clientHeight;
radius = Math.min (width, height) / 2;
pie = d3.layout.pie ()
.value (function (d) {return d.value;})
.sort (null);
arc = d3.svg.arc ()
.outerRadius (radius - 20)
.innerRadius (radius - 80);
svg = d3.select (element[0])
.append ("svg")
.attr ({width : width, height : height})
.append ("g")
.attr ("transform", "translate(" + width * 0.5 + "," + height * 0.5 + ")");
path = svg.datum (scope.data)
.selectAll ("path")
.data (pie)
.enter ()
.append ("path")
.attr ({
fill : function (d, i) {return scope.data [i].color;},
d : arc
});
scope.$watch (
"data",
function () {
pie.value (function (d) {return d.value;});
path = path.data(pie);
path.attr("d", arc);
},
true
);
}
};
})
i have used this https://embed.plnkr.co/plunk/jDvdSh as reference . All i want to implement is on search i want perform the service call and then manipulate the response and render it as a pie chart.or someone please explain how the pie chart directive is called in the above plnkr reference that would be more helpful