2010-10-08 14:43:33 +02:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script type="text/javascript" src="js/raphael-min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/dracula_graffle.js"></script>
|
|
|
|
|
<script type="text/javascript" src="js/dracula_graph.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
<!--
|
|
|
|
|
|
|
|
|
|
var redraw;
|
|
|
|
|
var width;
|
|
|
|
|
var height;
|
|
|
|
|
var layouter = null;
|
|
|
|
|
var renderer = null;
|
|
|
|
|
var json = [];
|
|
|
|
|
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
var req = new XMLHttpRequest();
|
|
|
|
|
|
|
|
|
|
if ( navigator.appName.indexOf('Microsoft') != -1 )
|
|
|
|
|
{
|
|
|
|
|
width = (document.body.offsetWidth > 50) ?
|
|
|
|
|
document.body.offsetWidth - 50 : 50;
|
|
|
|
|
height = (document.body.offsetHeight > 50 ) ?
|
|
|
|
|
document.body.offsetHeight - 50 : 50;
|
|
|
|
|
} else {
|
|
|
|
|
width = (window.innerWidth > 50) ?
|
|
|
|
|
window.innerWidth - 50 : 50;
|
|
|
|
|
height = (window.innerHeight > 50) ?
|
|
|
|
|
window.innerHeight- 50 : 50;
|
|
|
|
|
}
|
|
|
|
|
|
2010-10-08 18:57:06 +02:00
|
|
|
req.open ( 'GET', 'http://' + window.location.host + '/correlation_graph.json', true );
|
2010-10-08 14:43:33 +02:00
|
|
|
req.onreadystatechange = function() {
|
|
|
|
|
if ( req.readyState == 4 && req.status == 200 )
|
|
|
|
|
{
|
|
|
|
|
var g = new Graph();
|
|
|
|
|
var connections = [];
|
|
|
|
|
json = JSON.parse ( req.responseText );
|
|
|
|
|
|
|
|
|
|
for ( var i=0; i < json.length; i++ )
|
|
|
|
|
{
|
|
|
|
|
g.addNode ( json[i].id, { label: json[i].label });
|
|
|
|
|
|
|
|
|
|
if ( json[i].connectedTo )
|
|
|
|
|
{
|
|
|
|
|
for ( var j=0; j < json[i].connectedTo.length; j++ )
|
|
|
|
|
{
|
|
|
|
|
connections.push ({
|
|
|
|
|
"from": json[i].id,
|
|
|
|
|
"to" : json[i].connectedTo[j].id
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for ( var i=0; i < connections.length; i++ )
|
|
|
|
|
{
|
|
|
|
|
g.addEdge ( connections[i].from, connections[i].to, { directed: true });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var layouter = new Graph.Layout.Spring ( g );
|
|
|
|
|
layouter.layout();
|
|
|
|
|
|
|
|
|
|
var renderer = new Graph.Renderer.Raphael ( 'canvas', g, width, height );
|
|
|
|
|
renderer.draw();
|
|
|
|
|
|
|
|
|
|
redraw = function() {
|
|
|
|
|
layouter.layout();
|
|
|
|
|
renderer.draw();
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
req.send ( null );
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="canvas" style="border: 1px"></div>
|
|
|
|
|
<button id="redraw" onclick="redraw();">redraw</button>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
