<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="angular-google-chart.js"></script>
<script src="script.js"></script>
</head>
<body>
Angular.js Org Chart with
<a href='https://developers.google.com/chart/interactive/docs/gallery/orgchart?csw=1#Example'>Google Charts - Org Chart</a><p/>
<div ng-app="myapp">
<div ng-controller="myctrl">
<div google-chart chart="chart"//>
</div>
</div>
</body>
</html>
google.load('visualization', '1', {packages:['orgchart']});
var myapp = angular.module('myapp', ['googlechart']);
myapp.controller('myctrl', function ($scope, $http) {
$http.get('data.json').success( function(result) {
$scope.chart = {
type: "OrgChart",
data: result
};
});
});
myapp.directive('orgchart', function() {
return {
restrict: 'E',
link: function($scope, $elm) {
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.OrgChart($elm[0]);
chart.draw($scope.orgChartData);
}
}
});
/* Styles go here */
{
"cols" : [
{"label": "Name", "pattern": "", "type": "string"},
{"label": "Manager", "pattern": "", "type": "string"},
{"label": "ToolTip", "pattern": "", "type": "string"}
],
"rows" : [
{"c": [
{"v": "1", "f": "Mike O."},
{"v": ""},
{"v": "The President"}
]},
{"c": [
{"v": "2", "f": "Jim"},
{"v": "1"},
{"v": "VP"}
]},
{"c": [
{"v": "3", "f": "Alice"},
{"v": "1"},
{"v": ""}
]},
{"c": [
{"v": "4", "f": "Bob"},
{"v": "2"},
{"v": "Bob Sponge"}
]},
{"c": [
{"v": "Carol"},
{"v": "4"},
{"v": ""}
]}
]
}
/**
* @description Google Chart Api Directive Module for AngularJS
* @version 0.1
* @author Nicolas Bouillon <nicolas@bouil.org>
* @license MIT
* @year 2013
* https://github.com/bouil/angular-google-chart
*/
(function (document, window) {
'use strict';
function loadScript(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = callback;
script.onerror = function () {
throw Error('Error loading "' + url + '"');
};
document.getElementsByTagName('head')[0].appendChild(script);
}
angular.module('googlechart', [])
.constant('googleChartApiConfig', {
version: '1',
optionalSettings: {
packages: ['corechart']
}
})
.factory('googleChartApiProxy', ['$rootScope', '$q', 'googleChartApiConfig', function ($rootScope, $q, apiConfig) {
var apiReady = $q.defer(),
onLoad = function () {
// override callback function
var settings = {
callback: function () {
var oldCb = apiConfig.optionalSettings.callback;
$rootScope.$apply(function () {
apiReady.resolve();
});
if (angular.isFunction(oldCb)) {
oldCb.call(this);
}
}
};
settings = angular.extend({}, apiConfig.optionalSettings, settings);
window.google.load('visualization', apiConfig.version, settings);
};
loadScript('//www.google.com/jsapi', onLoad);
return function (fn, context) {
var args = Array.prototype.slice.call(arguments, 2);
return function () {
apiReady.promise.then(function () {
fn.apply(context, args.concat(Array.prototype.slice.call(arguments)));
});
};
};
}])
.directive('googleChart', ['$timeout', '$window', '$rootScope', 'googleChartApiProxy', function ($timeout, $window, $rootScope, apiProxy) {
return {
restrict: 'A',
scope: {
chart: '=chart'
},
link: function ($scope, $elm, $attr) {
// Watches, to refresh the chart when its data, title or dimensions change
$scope.$watch('chart', function () {
draw();
}, true); // true is for deep object equality checking
// Redraw the chart if the window is resized
$rootScope.$on('resizeMsg', function (e) {
$timeout(function () {
$scope.chartWrapper.draw();
});
});
function draw() {
if (!draw.triggered && ($scope.chart != undefined)) {
draw.triggered = true;
$timeout(function () {
draw.triggered = false;
var dataTable;
if ($scope.chart.data instanceof google.visualization.DataTable)
dataTable = $scope.chart.data;
else
dataTable = new google.visualization.DataTable($scope.chart.data, 0.5);
var chartWrapperArgs = {
chartType: $scope.chart.type,
dataTable: dataTable,
view: $scope.chart.view,
options: $scope.chart.options,
containerId: $elm[0]
};
if($scope.chartWrapper==null) {
$scope.chartWrapper = new google.visualization.ChartWrapper(chartWrapperArgs);
google.visualization.events.addListener($scope.chartWrapper, 'ready', function () {
$scope.chart.displayed = true;
});
google.visualization.events.addListener($scope.chartWrapper, 'error', function (err) {
console.log("Chart not displayed due to error: " + err.message);
});
}
else {
$scope.chartWrapper.setChartType($scope.chart.type);
$scope.chartWrapper.setDataTable(dataTable);
$scope.chartWrapper.setView($scope.chart.view);
$scope.chartWrapper.setOptions($scope.chart.options);
}
if(typeof($scope.chart.numberFormat) != 'undefined')
{
if($scope.formatter==null) {
$scope.formatter = new Array();
for (var i = 0; i < $scope.chart.numberFormat.cols.length; i++) {
$scope.formatter.push(new google.visualization.NumberFormat(
$scope.chart.numberFormat.cols[i].format)
);
}
}
else {
for (var i = 0; i < $scope.formatter.length; i++) {
$scope.formatter[i].format(dataTable,$scope.chart.numberFormat.cols[i].columnNum);
}
}
}
$timeout(function () {
$scope.chartWrapper.draw();
});
}, 0, true);
}
}
draw = apiProxy(draw, this);
}
};
}])
.run(function ($rootScope, $window) {
angular.element($window).bind('resize', function () {
$rootScope.$emit('resizeMsg');
});
});
})(document, window);