This tutorial requires you to have read Feeding JSON tree structures to the JIT and on controllers first.
Hi, this is going to be a quick tutorial on how to set the RGraph up and running.
We are going to work with this tree JSON structure:
var json = {"id":"node02",
"name":"0.2",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":-88}],
"children":[
{"id":"node13",
"name":"1.3",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":74}],
"children":[
{"id":"node24",
"name":"2.4",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":55}],
"children":[]},
{"id":"node25",
"name":"2.5",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":67}],
"children":[]},
{"id":"node26",
"name":"2.6",
"data":[
{"key":"key1",
"value":5},
{"key":"key2",
"value":-50}],
"children":[]},
{"id":"node27",
"name":"2.7",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":10}],
"children":[]},
{"id":"node28",
"name":"2.8",
"data":[
{"key":"key1",
"value":2},
{"key":"key2",
"value":-69}],
"children":[]},
{"id":"node29",
"name":"2.9",
"data":[
{"key":"key1",
"value":3},
{"key":"key2",
"value":98}],
"children":[]},
{"id":"node210",
"name":"2.10",
"data":[
{"key":"key1",
"value":6},
{"key":"key2",
"value":12}],
"children":[]},
{"id":"node211",
"name":"2.11",
"data":[
{"key":"key1",
"value":2},
{"key":"key2",
"value":-95}],
"children":[]}]},
{"id":"node112",
"name":"1.12",
"data":[
{"key":"key1",
"value":1},
{"key":"key2",
"value":96}],
"children":[
{"id":"node213",
"name":"2.13",
"data":[
{"key":"key1",
"value":6},
{"key":"key2",
"value":-58}],
"children":[]},
{"id":"node214",
"name":"2.14",
"data":[
{"key":"key1",
"value":9},
{"key":"key2",
"value":-42}],
"children":[]},
{"id":"node215",
"name":"2.15",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":92}],
"children":[]},
{"id":"node216",
"name":"2.16",
"data":[
{"key":"key1",
"value":7},
{"key":"key2",
"value":-15}],
"children":[]},
{"id":"node217",
"name":"2.17",
"data":[
{"key":"key1",
"value":3},
{"key":"key2",
"value":29}],
"children":[]},
{"id":"node218",
"name":"2.18",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":-59}],
"children":[]},
{"id":"node219",
"name":"2.19",
"data":[
{"key":"key1",
"value":3},
{"key":"key2",
"value":21}],
"children":[]},
{"id":"node220",
"name":"2.20",
"data":[
{"key":"key1",
"value":2},
{"key":"key2",
"value":78}],
"children":[]}]},
{"id":"node121",
"name":"1.21",
"data":[
{"key":"key1",
"value":3},
{"key":"key2",
"value":53}],
"children":[
{"id":"node222",
"name":"2.22",
"data":[
{"key":"key1",
"value":5},
{"key":"key2",
"value":10}],
"children":[]},
{"id":"node223",
"name":"2.23",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":21}],
"children":[]},
{"id":"node224",
"name":"2.24",
"data":[
{"key":"key1",
"value":6},
{"key":"key2",
"value":-32}],
"children":[]},
{"id":"node225",
"name":"2.25",
"data":[
{"key":"key1",
"value":5},
{"key":"key2",
"value":-42}],
"children":[]},
{"id":"node226",
"name":"2.26",
"data":[
{"key":"key1",
"value":2},
{"key":"key2",
"value":75}],
"children":[]},
{"id":"node227",
"name":"2.27",
"data":[
{"key":"key1",
"value":1},
{"key":"key2",
"value":-74}],
"children":[]},
{"id":"node228",
"name":"2.28",
"data":[
{"key":"key1",
"value":2},
{"key":"key2",
"value":52}],
"children":[]},
{"id":"node229",
"name":"2.29",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":-49}],
"children":[]}]},
{"id":"node130",
"name":"1.30",
"data":[
{"key":"key1",
"value":9},
{"key":"key2",
"value":-29}],
"children":[
{"id":"node231",
"name":"2.31",
"data":[
{"key":"key1",
"value":6},
{"key":"key2",
"value":-23}],
"children":[]},
{"id":"node232",
"name":"2.32",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":19}],
"children":[]},
{"id":"node233",
"name":"2.33",
"data":[
{"key":"key1",
"value":1},
{"key":"key2",
"value":92}],
"children":[]}]},
{"id":"node134",
"name":"1.34",
"data":[
{"key":"key1",
"value":9},
{"key":"key2",
"value":71}],
"children":[
{"id":"node235",
"name":"2.35",
"data":[
{"key":"key1",
"value":5},
{"key":"key2",
"value":-65}],
"children":[]}]},
{"id":"node136",
"name":"1.36",
"data":[
{"key":"key1",
"value":3},
{"key":"key2",
"value":-11}],
"children":[
{"id":"node237",
"name":"2.37",
"data":[
{"key":"key1",
"value":6},
{"key":"key2",
"value":-85}],
"children":[]},
{"id":"node238",
"name":"2.38",
"data":[
{"key":"key1",
"value":3},
{"key":"key2",
"value":-13}],
"children":[]},
{"id":"node239",
"name":"2.39",
"data":[
{"key":"key1",
"value":1},
{"key":"key2",
"value":80}],
"children":[]},
{"id":"node240",
"name":"2.40",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":-69}],
"children":[]}]},
{"id":"node141",
"name":"1.41",
"data":[
{"key":"key1",
"value":10},
{"key":"key2",
"value":-4}],
"children":[
{"id":"node242",
"name":"2.42",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":-27}],
"children":[]},
{"id":"node243",
"name":"2.43",
"data":[
{"key":"key1",
"value":9},
{"key":"key2",
"value":-44}],
"children":[]},
{"id":"node244",
"name":"2.44",
"data":[
{"key":"key1",
"value":9},
{"key":"key2",
"value":24}],
"children":[]},
{"id":"node245",
"name":"2.45",
"data":[
{"key":"key1",
"value":8},
{"key":"key2",
"value":-66}],
"children":[]}]}]};
Put this HTML in your page:
<html>
<head>
<link type="text/css" rel="stylesheet" href="/static/css/example-rgraph.css" />
<!--[if IE]>
<script type="text/javascript" src="/static/js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/static/js/rgraph/RGraph.js" ></script>
<script type="text/javascript" src="/static/js/example/example-rgraph.js" ></script>
</head>
<body onload="init();">
<canvas id="infovis" width="900" height="500"></canvas>
<div id="label_container"></div>
</body>
</html>
Note: You’ll probably have to change the paths to the css and javascript files.
Now, create a rgraph-example.css and put this code in it:
html,body {
width:100%;
height:100%;
overflow:hidden;
margin:0;padding:0;
background-color:#333;
text-align:center;
}
#infovis {
width:900px;
height:500px;
background-color:#222;
}
.node {
color: white;
background-color:transparent;
cursor:pointer;
font-weight:bold;
opacity:0.9;
border:1px solid red;
}
.node:hover {
cursor:pointer;
color: #222;
background-color:white;
font-weight:bold;
opacity:1;
}
Finally, create an example-rgraph.js file and put this code in it:
Note: I’ll be using the Mootools library to do this tutorial, just because I don’t want to spend time writing low level code that would make the code uglier. You can use any library you want (or none at all) though.
function init() {
//Set node interpolation to linear (can also be 'polar')
Config.interpolation = "linear";
//Set distance for concentric circles
Config.levelDistance = 100;
//Set number of concentric circles, default's to six.
Config.drawConcentricCircles = 4;
var json= //data defined previously
var canvas= new Canvas('infovis', '#ccddee', '#772277');
var rgraph= new RGraph(canvas, {
//Add a controller to make the tree move on click.
onCreateLabel: function(domElement, node) {
var d = $(domElement);
d.addEvents({
'click': function() {
rgraph.onClick(d.id);
}
});
}
});
//load tree from tree data.
rgraph.loadTreeFromJSON(json);
//compute positions
rgraph.compute();
//make first plot
rgraph.plot();
}
You should see a RGraph up and running. Click on the labels and the tree should move.
Some notes:
- It’s mandatory to put the width and height properties on the canvas html tag.
You could set those properties dynamically, of course, but what I mean is that setting only width and height style properties (as with CSS) isn’t enough. - You could change the label container id by setting the Config.labelContainer property to whatever id you like. Be sure to set that property before making a Canvas instance.
- The Canvas constructor takes 3 parameters: the canvas id, the fillStyle property and the strokeStyle property. If you don’t know what those properties are, take a look at this section from the canvas tutorial.
- You can take off the concentric circles by setting Config.drawConcentricCircles to false. Just be sure you do that before making a canvas or RGraph instance.
Customizing the Graph
Let’s add some labels!
First, strip off the border: 1px solid red; line from the .node class in your CSS file.
It should look like this:
.node {
color: white;
background-color:transparent;
cursor:pointer;
font-weight:bold;
opacity:0.9;
}
Now we are going to add a javascript controller in order to put the name of the nodes into the labels. Since we only need to do this once, we’ll use the onCreateLabel method. If you don’t know what I’m talking about you should probably read the on controllers post first.
So the JavaScript file should look like this now:
function init() {
//Set node interpolation to linear (can also be 'polar')
Config.interpolation = "linear";
//Set distance for concentric circles
Config.levelDistance = 100;
//Set number of concentric circles, default's to six.
Config.drawConcentricCircles = 4;
var json= //json data defined previously
var canvas= new Canvas('infovis', '#ccddee', '#772277');
var rgraph= new RGraph(canvas, {
//Add a controller to assign a name to the created label.
onCreateLabel: function(domElement, node) {
var d = $(domElement);
d.set('html', node.name).addEvents({
'click': function() {
rgraph.onClick(d.id);
}
});
}
});
//load tree from tree data.
rgraph.loadTreeFromJSON(json);
//compute positions
rgraph.compute();
//make first plot
rgraph.plot();
}
You should see some labels now.
The thing is that… well, they are not centered. So we’ll just add an onPlaceLabel method to the controller in order to do that, since the onPlaceLabel method is called after labels have been placed.
So the js code should now look like:
function init() {
//Set node interpolation to linear (can also be 'polar')
Config.interpolation = "linear";
//Set distance for concentric circles
Config.levelDistance = 100;
//Set number of concentric circles, default's to six.
Config.drawConcentricCircles = 4;
var json= //json data defined previously
var canvas= new Canvas('infovis', '#ccddee', '#772277');
var rgraph= new RGraph(canvas, {
//Add a controller to assign a name to the label.
onCreateLabel: function(domElement, node) {
var d = $(domElement);
d.set('html', node.name).addEvents({
'click': function() {
rgraph.onClick(d.id);
}
});
},
//Take off previous width and height styles and
//add half of the *actual* label width to the left position
// That will center your label (do the math man).
onPlaceLabel: function(domElement, node) {
domElement.innerHTML = '';
domElement.innerHTML = node.name;
var left = parseInt(domElement.style.left);
domElement.style.width = '';
domElement.style.height = '';
var w = domElement.offsetWidth;
domElement.style.left = (left - w /2) + 'px';
}
});
//load tree from tree data.
rgraph.loadTreeFromJSON(json);
//compute positions
rgraph.compute();
//make first plot
rgraph.plot();
}
You should see some centered labels now!
Labels already have the onclick event handler to move the graph. You set that onCreateLabel.
Remember there are lots of other controller methods!
Remember also that you can change the animation time and the frames per second in the animation with Config.animationTime and Config.fps.
Hope it was helpful.
Hello there, I'm Nicolas Garcia Belmonte, a Computer Science Engineer from the Buenos Aires Institute of Technology, in Argentina. I live in France now.
Hola nicolás:
thank you very much for you excelent work!! i was looking for something like this since long time ago.
i made a little prototype to visualize the code of some opensource project i’m working in, but i had some problems (and i could find documentation).
the prototype is here: http://emite.ourproject.org/seecode/rgraph.html
and the issues are related with the canvas size: if i specify the tutorial’s canvas size, everything is correct, but if i change this sizes everything is messed up. My goal is be able to see all the graph when loading the page.
Also i couldn’t made the same with hypertree because the jit lib is not able to render so many data. I hope it is solved in future versions.
again, congratulations for your excelent work and i hope you keep improveing it!!
dani
Hi Dani,
Although you changed width and height properties on your canvas HTML element, you forgot to change them on your CSS stylesheet. Change the width and height CSS properties on that stylesheet for #infovis and that should do the trick.
Bye!