get JSON using jQuery - SpaceTree

[Brian]

I am wanting to get the JSON data from an external .json file. I cant
get this to work.

I can get the file successfully but the SpaceTree top node on the only
node that is loaded and is undefined.
If I do an "alert" of the data returned from the jQuery getJSON call
the alert displays [object Object].

This is the code:
JSON:

{"id": "node02",
"name": "1.0",
"data": {"name": "Joe Bloggs", "title": "CEO of Allianz UK"},
"children": []
}
-----------------------------------------
I have simplified it for testing
-------------------------------
The js code:


function init(){

var jsonfile = "orgchart-example.json";
var json = $.getJSON(jsonfile, function(data) {
// alert("success"+ json);
return data;

})
.success(function() { alert("second success"); })
.error(function(status) { alert("error" + status); })
.complete(function() { alert("complete"); });
alert(json);

//Create a new ST instance
var st = new $jit.ST({
//id of viz container element
injectInto: 'org-chart-container',
//set distance between node and its children
levelDistance: 50,
//set the orentation for root to be at top
orientation: 'top',
align:'center',
siblingOffset:14,
//set node, edge and label styles
//set overridable=true for styling individual
//nodes or edges
Node: {
overridable: true,
// type: 'stroke-rect',
type: 'rectangle',
height: 50,
width: 170,
//canvas specific styles
CanvasStyles: {
fillStyle: '#fff',
strokeStyle: '#ccc',
lineWidth: 1
}
},
Edge: {
type: 'bezier',
overridable: true,
color: '#c3c3c3',
lineWidth: 1
},
Label: {
type: 'HTML'
},
onBeforeCompute: function(node){
Log.write("loading " + node.name);
},
onAfterCompute: function(){
Log.write("done");
},

onCreateLabel: function(label, node){
label.className = 'member';

label.id = node.id;
label.innerHTML = node.name;

if(!node.anySubnode("exist")) {

//count the number of subnodes
var count = 0;
node.eachSubnode(function(n) { count++; });
//append th more sub nodes icon
$("<span class='more'>[" + count + "]</span>").appendTo(label);

$(label).addClass("more");
}
else{

}
label.onclick = function(){
st.onClick(node.id);


};

},
onPlaceLabel: function(label, node) {

},
onBeforePlotNode: function(node){
//add some color to the nodes in the path between the
//root node and the selected node.
if (node.selected) {
// node.data.$color = "#ff7";
//set the node style when selected
$('#' + node.id ).addClass("selected");

}
else {
//remove the selected styling
$('#' + node.id ).removeClass("selected");


}
},
onBeforePlotLine: function(adj){
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
//adj.data.$color = "#009ee0";
adj.data.$color = "#003781";
adj.data.$lineWidth = 2;
}
else {
delete adj.data.$color;
delete adj.data.$lineWidth;
}
}
});

//load json data
st.loadJSON(json);
//compute node positions and layout
st.compute();
//emulate a click on the root node.
st.onClick(st.root);

}//END of init() function


$(document).ready(function() {
// Handler for .ready() called.
init();
});


Any help on this would be very helpful.

many thanks

[Brian]

Is there anyone who has successfully parsed a external .json file into
SpaceTree?

If someone has done this it would be great if you could share your
knowledge please.

many thanks in advance

[khadija elbedweihy]

I have been facing a related but not exactly the same problem and
tried lots of ways. I wanted to load dynamic data to initialize the
tree with and couldn't get to do it. I had the same output of alert
being "object Object". This is how it worked for me, my script looks
like this:

<script>
jQuery(document).ready(function() {
jQuery.noConflict();
alert("inside ready method");
jQuery.ajax({
url: "content.jsp",
type: "POST",
async: false,
success: function(data) {
alert("data" + data);
var obj = jQuery.parseJSON(data);
init(obj);
}
});

});
</script>

and the init() method recieves the data at the begining like this:

function init(data){
alert("inside init");
alert(data);
var json = data;
.....
and then uses the data successfully after that..

Hope this helps!

[Joydip Chakraborty]

I guess you can use the eval function in javascript. So while
initializing the data do it something like the following

var json=eval("'"+data+"'").

> --
> You received this message because you are subscribed to the Google Groups "JavaScript InfoVis Toolkit" group.
> To post to this group, send email to javascript-information...@googlegroups.com.
> To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.
>

--
Regards
Joydip Chakraborty

[Brian]

Finally, I have managed to get a JIT visualisation to work with
external .json file.
I am using a Space Tree as my visualisation but im sure this will work
with HyperTree. Below is how I have gone about it.

/*--------- here is my json file --------------*/
{"id":"one", "name":"John", "data":{"name":"John", "jobTitle":"Admin",
"fax":"Albert", "mobile":"mobile", "phone":"sssss",
"email":"jo.b...@test.co.uk"}, "children": []}



/*-------- javascript code ----------*/

//The Org Chart code
function init(json){

//START Create a new Space Tree instance

var st = new $jit.ST({

... //all the space tree code here
}); //END Create a new Space Tree instance

//load json data
st.loadJSON(json);
//compute node positions and layout
st.compute();
//emulate a click on the root node.
st.onClick(st.root);

}//END of init() function

//ajax call
var jsonurl = "orgchart-example.json";
$.ajax({
url : jsonurl,
type : "GET",
success: function(data) {
alert("Success: data: " + data);
var json = $.parseJSON(data);
console.log(json);
//alert(obj);
init(json); //this line will call init function with JSON loaded
after this call

},
error:function (xhr, ajaxOptions, thrownError){
alert("Status error: " +xhr.status);
alert("Error message: " +thrownError);
}
});

Hope this helps anyone.
Brian

> >> > If I do an "alert" of the data returned from thejQuerygetJSON call

> > For more options, visit this group athttp://groups.google.com/group/javascript-information-visualization-t....
>
> --
> Regards
> Joydip Chakraborty