Customizing JavaScript Visualization Toolkit Spacetree Node

Question

I saw many people recommend JavaScript Visualization Toolkit (The JIT) for org chart. I am trying to use SpaceTree of JavaScript InfoVis Toolkit 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:

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 is at the JIT website (I am not allowed to post more than one hyperlink)
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.

Answer 1

You could make yourNode the prototype ancestor of Graph.node, set up the slots you want, then add the appropriate render / force code customizations.

Answer 2

The Spacetree can be customized very much. The nodes can display images or anything we want. We can have custom click events for the nodes. To have custom events, you will have to redraw the whole tree in the onclick event.

Here is an example. On the success function of the click event. Here I have called the click event on the class "clickable"

      $.ajaxSetup({ cache: false });             
           $(".clickable").live("click", function () {              
            $.ajax({
                url: url + "?id=" + parentId + "&ts=" + new Date().getMilliseconds(),
                type: "POST",
                cache: false,
                dataType: "html",
                success: function (html) {                       
                    init(html);                        
                }
              });
            });

The name property can be used to give the image like this:

{id:"90", name:"<a href='javascript:;' class='clickable' name='90'><img src='images/picture.gif' width='30' height='30' alt='pic' /></a>", data:{}, children:[]}

Mark as Answer if useful. thanks.

Answer 3

I'm using spacetrees and I just set the label type to HTML (which is the default) and you can just use regular HTML and CSS to style your labels. I have images, links, text, etc.

Note that you're working with the label and not the node. The node is the graph component; the label is the visual that you see which represents the node.

When you initialize the spacetree pass in a function for "onCreateLabel":

var myOnCreateLabel = function(label, node) {
  label.onclick = function(event) {/* setup onclick handler */};
  label.innerHTML = "<img src='myImage.png' />"; // use image in label
};
var myST = new $jit.ST({/*other settings*/ onCreateLabel: myOnCreateLabel});

Answer 4

if you don't mind working with HTML5/Canvas only, try this as well http://orgplot.codeplex.com, simple interface support image node as well.

Answer 5

 this.st=new $jit.ST(

{

            onCreateLabel: function (label, node)
            {
                var labelContent = $('<table cellpadding="0" cellspacing="0" class="nodeContainer"><tr><td>' +
                    '<div class="buttonContainer">' +
                    '</div></td></tr><tr><td>' +
                    '<table  class="nodeBox" cellpadding="0" cellspacing="0">' +
                    '<tr>' +
                    '<td class="iconTd"></td>' +
                    '<td class="center nodeName">' + node.name + '</td>' +
                    '</tr></table>' +
                    '</td></tr></table>');
                thisObject.onCreateLabel.raise(thisObject, { labelContent: labelContent, node: node });
                if (node.data && node.data.Icon && node.data.Icon != "")
                {
                    labelContent.find(".iconTd").append($("<img src='" + node.data.Icon + "' alt=''>"));
                }
                else
                {
                    labelContent.find(".iconTd").remove();
                }

                var lblCtl = $(label).append(labelContent);

                if (node.data.Data.ChildrenCount)
                {
                    labelContent.append("<tr><td class='subnode'></td></tr>");
                }
                if (node.name.length > 40)
                {
                    lblCtl.attr("title", node.name);
                    node.name = node.name.substr(0, 37);
                    node.name = node.name + "...";
                }                        
                lblCtl.click(function (sender)
                {
                    //thisObject.isNodeClicked = true;
                    var target = $(sender.target);
                    if (!target.hasClass("subnode"))
                    {
                        if (thisObject.currentSelectedNode)
                        {
                            thisObject.currentSelectedNode.buttonContainer.hide();
                        }
                        var btnContainer = labelContent.find(".buttonContainer");
                        thisObject.currentSelectedNode = { nodeElement: lblCtl, node: node, buttonContainer: btnContainer, event: sender };
                        btnContainer.append(thisObject.$globalButtonContainer.show()).show();
                        var button = target.closest(".chartActionButton");
                        if (button.length > 0)
                        {
                            thisObject.onNodeAction.raise(thisObject, { name: button.attr("name"), nodeElement: lblCtl, node: node, button: target });
                        }
                        else
                        {
                            thisObject.onNodeClick.raise(thisObject, thisObject.currentSelectedNode);
                        }
                    }
                    else
                    {
                        thisObject.st.onClick(node.id);
                    }
                });
                label.id = node.id;
                //set label styles
                thisObject.setNodeStyle(node.data.Style, label.style);
            }

});