Hi,
Been playing with the javascript information visualisation tool
thejit.org - which incidentaly has just been acquired by Sencha Labs who make ExtJS.
Anyway, I was working for a client (
www.malcolmwarrington.co.uk/services.html) and we wanted to show what he did in an interactive way.
This was achieved with a hypertree visualisation.
Since then I’ve been wanting to hook this data up to a live representation of the document tree, so he could manage changes himself.
I’ve just got it working on my own site (
disobedientmedia.co.uk/services) and wanted to share how it’s done.
First off, head over to thejit.org and download the toolkit and play with the examples to get a feel for what this can do.
Now, when setting up whichever graph you want to use, run some javascript to set up the data via AJAX and JSON return value
$.get("/getgraph.html", function(json){
var json1 = eval('(' + json + ')')
//load JSON data.
ht.loadJSON(json1);
//compute positions and plot.
ht.refresh();
//end
ht.controller.onAfterCompute();
});
the getgraph.html is a document with an empty AJAX template that just runs a snippet [[getServices]]
getServices
<?php
function getChildrenRecursive($documentId) {
global $modx;
$res = array();
//get the document by ID
$document = $modx->getObject('modResource',$documentId);
if (is_null($document)) {
return $res;
}
$res['id'] = $document->get('id');
$res['name'] = $document->get('pagetitle');
$res['data']['tooltip'] = $document->getContent();
$res['children'] = array();
$children = $document->getMany('Children');
if (!is_array($children) || count($children) == 0) {
return $res;
}
foreach ($children as $child) {
$childId = $child->get('id');
$res['children'][] = getChildrenRecursive($childId);
}
return $res;
}
$servicesId = 44;
$return = getChildrenRecursive($servicesId);
$return['data'] = '';
return json_encode($return);
it’s not parameterised yet, being hardcoded to the parent document that you want to visualise, in my case ID 44
All it really does is walk the children, creating an array that matches what the infovis toolkit wants, then json encodes it at the end
And to wrap this up, you need a way of kicking this off.
I’ve got a document called services that contains
[[JITRegistration]]
<div id="serviceTooltip">Click and explore our services with the interactive graph below</div>
<div id="infovis"></div>
the JITRegistration snippet just uses modx register javascript and CSS stuff.
I think the results are pretty cool,
Robin
