var app = angular.module("project", []);
google.load("visualization", "1", {
packages: ["orgchart"]
});
app.factory("google", function() {
return google;
});
app.controller("MainCtrl", function($scope) {
$scope.name = "main";
});
app.controller("ChartCtrl", function($scope, google) {
$scope.arrData = [
["Name", "Manager", "Tooltip"],
["Keyword", "Project", ""],
[{v: 'tail', f: 'Long tail<br/><font color="red"><i>Vice President<i></font>'}, "Keyword", ""]
];
$scope.draw = function() {
var el, orgChart;
el = document.getElementById("orgchart");
orgChart = new google.visualization.OrgChart(el);
orgChart.draw(google.visualization.arrayToDataTable($scope.arrData), {allowHtml: true});
return orgChart;
};
});
<!doctype html>
<html ng-app="project">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css">
<script src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="http://sigmajs.org/js/sigma.min.js"></script>
<script src="http://sigmajs.org/js/sigma.parseGexf.js"></script>
<script src="chart.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span11 sigma-parent">
<div class="sigma-expand" id="sigma-example"></div>
</div>
</div>
<div ng-controller="MainCtrl">
<h1>Bootstrap starter template, {{name}}!</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
<div ng-controller="ChartCtrl">
<button ng-click="draw()">draw</button>
<div id="orgchart"></div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
table[class^="google-visualization"] {
border-collapse: inherit;
}
td[class^="google-visualization"] {
font-size: 0.9em;
}
/* sigma.js context : */
.sigma-parent {
position: relative;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #222;
height: 500px;
}
.sigma-expand {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.buttons-container{
padding-bottom: 8px;
padding-top: 12px;
}
/**
* First, let's instanciate sigma.js :
*/
var init = function() {
var sigInst = sigma.init($('#sigma-example')[0])
.drawingProperties({
defaultLabelColor: '#fff'
})
.graphProperties({
minNodeSize: 0.5,
maxNodeSize: 5
});
// (requires "sigma.parseGexf.js" to be executed)
sigInst.parseGexf('data.gexf');
/**
* Now, here is the code that shows the popup :
*/
(function () {
var popUp;
// This function is used to generate the attributes list from the node attributes.
// Since the graph comes from GEXF, the attibutes look like:
// [
// { attr: 'Lorem', val: '42' },
// { attr: 'Ipsum', val: 'dolores' },
// ...
// { attr: 'Sit', val: 'amet' }
// ]
function attributesToString(attr) {
return '<ul>' + attr.map(function (o) {
return '<li>' + o.attr + ' : ' + o.val + '</li>';
}).join('') + '</ul>';
}
function showNodeInfo(event) {
if(popUp && popUp.remove()) {}
var node;
sigInst.iterNodes(function (n) {
node = n;
}, [event.content[0]]);
popUp = $('<div class="node-info-popup"></div>')
.append(
// The GEXF parser stores all the attributes in an array named
// 'attributes'. And since sigma.js does not recognize the key
// 'attributes' (unlike the keys 'label', 'color', 'size' etc),
// it stores it in the node 'attr' object :
attributesToString(node.attr.attributes))
.attr('id', 'node-info' + sigInst.getID())
.css({
'display': 'inline-block',
'border-radius': 3,
'padding': 5,
'background': '#fff',
'color': '#000',
'box-shadow': '0 0 4px #666',
'position': 'absolute',
'left': node.displayX,
'top': node.displayY + 15
});
$('ul', popUp)
.css('margin', '0 0 0 20px');
$('#sigma-example')
.append(popUp);
}
function hideNodeInfo(event) {
if(popUp && popUp.remove()) {
popUp = false;
}
}
sigInst.bind('overnodes', showNodeInfo)
.bind('outnodes', hideNodeInfo)
.draw();
})();
};
$(document).ready(function() {
init();
})
<?xml version="1.0" encoding="UTF-8" ?>
<gexf xmlns:viz="http:///www.gexf.net/1.1draft/viz" version="1.1" xmlns="http://www.gexf.net/1.1draft">
<meta lastmodifieddate="2010-05-29+01:27">
</meta>
<graph defaultedgetype="directed" idtype="string" type="static">
<attributes class="node" mode="static">
<attribute id="authority" title="Authority" type="float" />
<attribute id="hub" title="Hub" type="float" />
</attributes>
<nodes count="77">
<node id="0.0" label="Myriel">
<attvalues>
<attvalue for="authority" value="0.01880342" />
<attvalue for="hub" value="0.01880342" />
</attvalues>
<viz:size value="22" />
<viz:color b="45" g="72" r="216" />
<viz:position x="268" y="91" z="0.0" />
</node>
<node id="1.0" label="Mondo">
<attvalues>
<attvalue for="authority" value="0.01880342" />
<attvalue for="hub" value="0.01880342" />
</attvalues>
<viz:size value="22.714287" />
<viz:color b="45" g="72" r="216" />
<viz:position x="273" y="96" z="0.0" />
</node>
<node id="3.0" label="Faka">
<attvalues>
<attvalue for="authority" value="0.01880342" />
<attvalue for="hub" value="0.01880342" />
</attvalues>
<viz:size value="22.714287" />
<viz:color b="45" g="72" r="216" />
<viz:position x="280" y="90" z="0.0" />
</node>
<node id="4.0" label="Faka">
<attvalues>
<attvalue for="authority" value="0.01880342" />
<attvalue for="hub" value="0.01880342" />
</attvalues>
<viz:size value="22.714287" />
<viz:color b="45" g="72" r="216" />
<viz:position x="270" y="90" z="0.0" />
</node>
</nodes>
<edges count="254">
<edge id="0" source="1.0" target="0.0" />
</edges>
</graph>
</gexf>