Customizing SpaceTree Nodes

[Ram]

Hi,
I am trying to use SpaceTree of http://thejit.org for org chart.
The nodes in my org chart is like a component in itself that has
employee profile pic, two different icons that show up overlays on
click and some 3 lines of simple text having name, title, and number
of reports ... each line is separated by a light horizontal line.
Something like:

___________
| _________ |
| | Pic ||
| |_________||
|------------------|
| Name |
|------------------|
| Title |
|------------------|
| number |
|__________|

My question is, is it possible to customize the spacetree nodes to
such an extent? Can I have Node almost like another "component" or
JavaScript object that has its own render method?

I researched on forums and some options I considered are:

1) $jit.ST.NodeTypes.implement() ... but based on examples I saw,
this seem to be helping in customizing node in terms of shapes etc but
not like layout drawn above. I am referring to customization something
like:
http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef

2) I tried to set innerHtml in onCreateLabel method in example5.js
at: but it seems to be doing nothing. Although, I'm not sure if that
will be a good way of node customization. Example5 at:
http://thejit.org/static/v20/Jit/Examples/Spacetree/example5.html and
javscript file at http://thejit.org/static/v20/Jit/Examples/Spacetree/example5.js

3) Extending Graph.Node ... I am still looking into this option and
it this point of time, I don't know how complicated it is to have
space tree use Graph.myNode and what will Graph.myNode even look like?
I need to think more on those lines and see if it is even feasible.

I appreciate any help or provide some pointers. Thanks much.

Ram

[Nico Garcia Belmonte]

If you know already what to put as string and that information won't
be changing in the visualization you can set the html as the name of
the node right in the JSON data:

{
'id': 'someid',
'name': '<div class=\'node-pic\'><img src=\'yousource.jpg\'
/></div><div class=\'name\'>somename</div>' //etc.
}

Then you can set autoHeight: true as value for the Node options in the
visualization constructor. For more information about the autoheight
property you can go here:

http://thejit.org/static/v20/Docs/files/Options/Options-Node-js.html

> --
> 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.
>
>

[Ram]

Thanks Nico, I got moved to another high priority project and didn't
get a chance to work on this further. I'll explore more on your
suggestions. Thanks for your time.

On Dec 18 2010, 7:03 pm, Nico Garcia Belmonte <phil...@gmail.com>
wrote:

> If you know already what to put as string and that information won't
> be changing in the visualization you can set the html as the name of
> the node right in the JSON data:
>
> {
>   'id': 'someid',
>   'name': '<div class=\'node-pic\'><img src=\'yousource.jpg\'
> /></div><div class=\'name\'>somename</div>' //etc.
>
> }
>
> Then you can set autoHeight: true as value for the Node options in the
> visualization constructor. For more information about the autoheight
> property you can go here:
>
> http://thejit.org/static/v20/Docs/files/Options/Options-Node-js.html
>
>
>
>
>
>
>
> On Wed, Dec 15, 2010 at 12:56 PM, Ram <rpal...@gmail.com> wrote:
> > Hi,

> >   I am trying to use SpaceTree ofhttp://thejit.orgfor org chart.

> > The nodes in my org chart is like a component in itself that has
> > employee profile pic, two different icons that show up overlays on
> > click and some 3 lines of simple text having name, title, and number
> > of reports ... each line is separated by a light horizontal line.
> > Something like:
>
> >   ___________
> >   | _________ |
> >   | | Pic          ||
> >   | |_________||
> >   |------------------|
> >   | Name         |
> >   |------------------|
> >   | Title           |
> >   |------------------|
> >   | number      |
> >   |__________|
>
> >   My question is, is it possible to customize the spacetree nodes to
> > such an extent? Can I have Node almost like another "component" or
> > JavaScript object that has its own render method?
>
> >   I researched on forums and some options I considered are:
>
> >   1) $jit.ST.NodeTypes.implement() ... but based on examples I saw,
> > this seem to be helping in customizing node in terms of shapes etc but
> > not like layout drawn above. I am referring to customization something
> > like:

> >http://groups.google.com/group/javascript-information-visualization-t...

>
> >   2) I tried to set innerHtml in onCreateLabel method in example5.js
> > at:  but it seems to be doing nothing. Although, I'm not sure if that
> > will be a good way of node customization. Example5 at:
> >http://thejit.org/static/v20/Jit/Examples/Spacetree/example5.htmland

> > javscript file athttp://thejit.org/static/v20/Jit/Examples/Spacetree/example5.js

>
> >   3) Extending Graph.Node ... I am still looking into this option and
> > it this point of time, I don't know how complicated it is to have
> > space tree use Graph.myNode and what will Graph.myNode even look like?
> > I need to think more on those lines and see if it is even feasible.
>
> > I appreciate any help or provide some pointers. Thanks much.
>
> > Ram
>
> > --
> > 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 athttp://groups.google.com/group/javascript-information-visualization-t....