Piechart in AngularJS
A piechart directive for AngularJS
HTML
<script src="http://code.angularjs.org/1.1.1/angular.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
</script>
<div ng-app="chartsApp">
<div ng-controller="PieCtrl">
<span>MultiSelect DropDown:</span>
<br />
<select name="multipleSelect" id="multipleSelect" ng-model="selectedField" multiple
ng-options="name for name in names" ng-change="getDetails()"></select>
<br />
<div class="piechart" ></div>
</div>
</div>
JavaScript
var chartsApp = angular.module('chartsApp', []);
chartsApp.directive('piechart', function () {
return {
restrict: 'C',
replace: true,
template: '<div id="piechart_div" style="width: 900px; height: 500px;"></div>',
link: function (scope, element, attrs) {
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
scope.data);
var options = scope.options;
var updatedata = scope.updatedata;
var chart = new google.visualization.PieChart(document.getElementById('piechart_div'));
chart.draw(data, options);
}
}
};
});
function PieCtrl($scope) {
$scope.names = ["Business 1","Business 2","Business 3","Business 4","Business 5"];
$scope.selectedVal="";
$scope.data = [
['Business', 'Hours per Day'],
['Business 1', 11],
['Business 2', 2],
['Business 3', 2],
['Business 4 ', 2],
['Business 5', 7]
];
$scope.options = {
title: "My daily activities",
is3D: true
};
$scope.getDetails = function() {
// alert(JSON.stringify($scope.selectedField));
for(var j=0;j< $scope.selectedField.length;j++){
//alert($scope.selectedField[j]);
$scope.selectedVal = $scope.selectedField[j];
for(var i=1;i< $scope.data.length;i++){
//alert(JSON.stringify($scope.data[i]));
// alert(JSON.stringify($scope.selectedColour));
if($scope.data[i].includes($scope.selectedVal)){
//alert("yes");
//alert(JSON.stringify($scope.data[1]));
var index = $scope.data.indexOf($scope.data[i]);
// alert(a);
$scope.data.splice(index,1);
alert(JSON.stringify($scope.data));
var data = google.visualization.arrayToDataTable(
$scope.data);
//var options = scope.options;
...