Account Options

  1. Sign in
The old Google Groups will be going away soon, but your browser is incompatible with the new version.
Google Groups Home
« Groups Home
JavaScript InfoVis Toolkit
Home
About this group
Apply for group membership
get JSON using jQuery - SpaceTree
Options
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
   5 messages - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
Brian  
View profile  
 More options Jan 25, 5:03 pm
From: Brian <dotdream...@gmail.com>
Date: Wed, 25 Jan 2012 14:03:42 -0800 (PST)
Local: Wed, Jan 25 2012 5:03 pm
Subject: get JSON using jQuery - SpaceTree
Print | Individual message | Show original | Report this message | Find messages by this author
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


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Brian  
View profile  
 More options Jan 27, 2:22 am
From: Brian <dotdream...@gmail.com>
Date: Thu, 26 Jan 2012 23:22:00 -0800 (PST)
Subject: Re: get JSON using jQuery - SpaceTree
Print | Individual message | Show original | Report this message | Find messages by this author
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:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
khadija elbedweihy  
View profile  
 More options Jan 28, 4:37 pm
From: khadija elbedweihy <kelbedwe...@gmail.com>
Date: Sat, 28 Jan 2012 13:37:10 -0800 (PST)
Local: Sat, Jan 28 2012 4:37 pm
Subject: Re: get JSON using jQuery - SpaceTree
Print | Individual message | Show original | Report this message | Find messages by this author
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!

On Jan 27, 7:22 am, Brian <dotdream...@gmail.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Joydip Chakraborty  
View profile  
 More options Jan 28, 11:45 pm
From: Joydip Chakraborty <joyd...@gmail.com>
Date: Sun, 29 Jan 2012 10:15:50 +0530
Local: Sat, Jan 28 2012 11:45 pm
Subject: Re: get JSON using jQuery - SpaceTree
Print | Individual message | Show original | Report this message | Find messages by this author
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

--
Regards
Joydip Chakraborty

 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Brian  
View profile  
 More options Feb 11, 6:20 am
From: Brian <dotdream...@gmail.com>
Date: Sat, 11 Feb 2012 03:20:21 -0800 (PST)
Local: Sat, Feb 11 2012 6:20 am
Subject: Re: get JSON using jQuery - SpaceTree
Print | Individual message | Show original | Report this message | Find messages by this author
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

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

});

Hope this helps anyone.
Brian

On Jan 29, 4:45 am, Joydip Chakraborty <joyd...@gmail.com> wrote:


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2012 Google