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;
//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");
},
//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);
},
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");
> 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;
> //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);
> },
> 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");
> //load json data
> st.loadJSON(json);
> //compute node positions and layout
> st.compute();
> //emulate a click on the root node.
> st.onClick(st.root);
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:
> 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
> On Jan 25, 10:03 pm, Brian <dotdream...@gmail.com> wrote:
> > 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:
> > },
> > 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");
<kelbedwe...@gmail.com> wrote: > 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:
> 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!
> On Jan 27, 7:22 am, Brian <dotdream...@gmail.com> wrote: >> 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
>> On Jan 25, 10:03 pm, Brian <dotdream...@gmail.com> wrote:
>> > 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:
>> > }, >> > 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");
> -- > 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-visualization-toolkit@googlegroups.com. > To unsubscribe from this group, send email to javascript-information-visualization-toolkit+unsubscribe@googlegroups.com. > For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-t....
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.blo...@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
> 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+"'").
> On Sun, Jan 29, 2012 at 3:07 AM, khadija elbedweihy
> <kelbedwe...@gmail.com> wrote:
> > 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:
> > 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!
> > On Jan 27, 7:22 am, Brian <dotdream...@gmail.com> wrote:
> >> 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
> >> On Jan 25, 10:03 pm, Brian <dotdream...@gmail.com> wrote:
> >> > 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 thejQuerygetJSON 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:
> >> > },
> >> > 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");
> > --
> > 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-visualization-toolkit@googlegroups.com.
> > To unsubscribe from this group, send email to javascript-information-visualization-toolkit+unsubscribe@googlegroups.com.
> > For more options, visit this group athttp://groups.google.com/group/javascript-information-visualization-t....