var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.displayGraph = function() {
console.log('Showing Graph');
$scope.showGraph = true;
$scope.basicAreaChart = {"title":{"text":"The Title"},"tooltip":{"pointFormat":"{series.name}: <b>{point.percentage}%</b>","percentageDecimals":1},"legend":{"enabled":false,"layout":"vertical","verticalAlign":"middle","y":20,"maxHeight":150,"align":"right"},"plotOptions":{"pie":{"allowPointSelect":true,"cursor":"pointer","showInLegend":true,"innerSize":"50%"}},"series":[{"type":"pie","name":"Batch usage","data":[["no_email2",1],["FTOS",5],["Everyone_8",87],["Everyone_7",98],["Everyone_1",103],["Everyone_13",109],["Everyone_9",140],["Everyone_4",146],["Everyone_12",180],["Everyone_11",253],["Everyone_2",267],["Everyone_6",272],["Everyone_5",331],["Everyone_3",368],["Everyone_10",373]]}]};
};
$scope.displayGraph2 = function() {
console.log('Showing Graph');
$scope.showGraph = true;
$scope.basicAreaChart = {"title":{"text":"The Title 2"},"tooltip":{"pointFormat":"{series.name}: <b>{point.percentage}%</b>","percentageDecimals":1},"legend":{"enabled":false,"layout":"vertical","verticalAlign":"middle","y":20,"maxHeight":150,"align":"right"},"plotOptions":{"pie":{"allowPointSelect":true,"cursor":"pointer","showInLegend":true,"innerSize":"50%"}},"series":[{"type":"pie","name":"Batch usage","data":[["no_email2",1],["FTOS",5],["Everyone_8",87],["Everyone_7",98],["Everyone_1",103],["Everyone_13",109],["Everyone_9",140],["Everyone_4",146],["Everyone_12",180],["Everyone_11",253],["Everyone_2",267],["Everyone_6",272],["Everyone_5",331],["Everyone_3",368],["Everyone_10",373]]}]};
};
});
app.directive('chart', function () {
return {
restrict: 'E',
template: '<div></div>',
transclude:true,
replace: true,
link: function (scope, element, attrs) {
var chartsDefaults = {
chart: {
renderTo: element[0],
type: attrs.type || null,
height: attrs.height || null,
width: attrs.width || null
}
};
//Update when charts data changes
scope.$watch(function() { return attrs.value; }, function(value) {
if(!attrs.value) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var deepCopy = true;
var newSettings = {};
$.extend(deepCopy, newSettings, chartsDefaults, JSON.parse(attrs.value));
console.log('Directive is rendering graph');
var chart = new Highcharts.Chart(newSettings);
chart.setSize(400, 400);
});
}
};
});
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Rendering a graph when a div is shown</h1>
<input type="button" value="Show Graph" ng-click="displayGraph()" >
<input type="button" value="Show Second Graph" ng-click="displayGraph2()" >
<div ng-show="showGraph">
<chart value="{{basicAreaChart}}" type="area" height="400" ></chart>
</div>
</body>
</html>
/* CSS goes here */