Dynamic node load from local - not ajax

144 views
Skip to first unread message

DaveCline

unread,
May 21, 2012, 4:31:11 PM5/21/12
to javascript-information...@googlegroups.com
Tribe,

Issue: 
Too many nodes constructed for a treemap.
I have more than 1000 records from which a hierarchy is built.
I ship an entire table to the browser as JSON and construct a treemap hierarchy there.

Parsing these 1000 records into a complete tree takes too long on some browsers. I'd like to cut up the process so that, on demand, I provide additional tree branches when a node is clicked.

I've looked at the dynamic request example on TheJIT.com/demos/ and that's not quite what I have.

I already have the JSON locally, I just need to determine when a child is clicked, if the child has zero children, but MAY have children buried in the JSON record set, then go and fetch those records and build the additional tree for that child.

I may be showing 2 or 3 or 4 levels at a time and won't know what level a user will click until the even occurs.

Example of processing sequence for illustration purposes:

Examine all 1000 records,
We find 10 unique "colors" (red, blue, green, yellow, ...)
Within each color branch, we may have many "fruits".

The treemap should show:
Root - 
 - Red
 - Blue
 - Green
 - - Limes
 - - Apples
 - - Grapes
 - Yellow
...

The tree has only been built to show the above hierarchy, no child nodes were added to speed presentation.

When a user clicks on the title bar "Green", say, we reparse the JSON dataset and extract the Green children and present the next level:
Green - 
 - Limes
 - Apples
 - - United States
 - - United Kingdom
 - - China
 - - Chile
 - Grapes
...

And so on down the tree until we get to the leaf level which would be region where green apples were grown within the country.

Color -> Fruit -> Country -> Region (details here)

Thousands of nodes but only those requested to be shown have been parsed from the JSON tree.

Thanks for any advice.

-DC

DaveCline

unread,
May 21, 2012, 6:14:45 PM5/21/12
to javascript-information...@googlegroups.com
Nevermind.

I see that the demo actually does have subtree retrieval:


  1.   //Implement this method for retrieving a requested    
  2.   //subtree that has as root a node with id = nodeId,    
  3.   //and level as depth. This method could also make a server-side    
  4.   //call for the requested subtree. When completed, the onComplete     
  5.   //callback method should be called.    
  6.   request: function(nodeId, level, onComplete){    
  7.     var tree = eval('(' + json + ')');    
  8.     var subtree = $jit.json.getSubtree(tree, nodeId);    
  9.     $jit.json.prune(subtree, 1);    
  10.     onComplete.onComplete(nodeId, subtree);    
  11.   }, 

Sorry for my lack of investigative skills.

Reply all
Reply to author
Forward
0 new messages