As always you will need the source files, you can either download our sample files or get the latest release by visiting our aggregated list at http://blog.everythingfla.com/?p=339.

Let's create some HTML and JavaScript magic:

That's it. If you run the application, you will find a chart that is clickable and fun, and just scratches the capabilities of this really cool data networking library.

I'll avoid getting into the details of the actual API as that is fairly intuitive and has a really nice library of information and samples. So instead I will focus on the changes and enhancements that I've created in this application.

Before we do that we need to understand how the data structure of this chart works. Let's take a deeper look into how the data source object will look when filled with information:

{
        "id": "node0",
        "name": "",
        "data": {
          "$type": "none"
        },
        "adjacencies": [
            {"nodeTo": "node1","data": {'$type': 'none'}}, 
            {"nodeTo": "node2","data": {'$type': 'none'}}, 
            {"nodeTo": "node3","data": {'$type': 'none'}}, 
            {"nodeTo": "node4","data": {'$type': 'none'}}
                       ]
}, 
      
{
        "id": "node1",
        "name": "node 1",
        "data": {
          "$angularWidth": 300,
          "$color": "#B1DDF3",
          "$height": 40
        },
        "adjacencies": [
            {
              "nodeTo": "node3",
              "data": {
                "$color": "#ddaacc",
                "$lineWidth": 4
              }
            }
                    ]
},

There are a few important factors to note. The first is that there is a base parent that is the parent of all the parentless nodes. In our case it's a flat chart. The relationships that are really thrilling are between nodes that are at an equal level. As such the main parent has a relationship with all the nodes that are to follow. The children elements, such as node1 in this case, could have relationships. They are listed out in an array called adjacencies that holds objects. The only mandatory parameter is the nodeTo property. It lets the application know the one-way relationship list. There are optional layout parameters that we will add later only when we want to highlight a line. So let's see how we can create this type of data dynamically with the help of a few functions.

The createNode function helps us keep our code clean by wrapping up the dirty steps together. Every new element that we add needs to be added into our array and is needed to update our main parent (that is always going to be in position 0 of our array of new elements):

function createNode(id,name,wid,hei,clr){
  var obj = {id:id,name:name,data:{"$angularWidth":wid,"$height":hei,"$color":clr},adjacencies:[]};
  dataSource[0].adjacencies.push({"nodeTo": id,"data": {'$type': 'none'}});
  dataSource.push(obj);

  return obj; 	
}

We return the object as we want to continue and build up the relationship with this object. As soon as we create a new object (in our init function), we call the relate function and send to it all the relationships that our element will have to it. The logic of the relate function looks more complicated that it actually is. The function uses a hidden or often ignored feature in JavaScript that enables developers to send an open-ended number of parameters into a function with the use of the arguments array that is created automatically within every function. We can get these parameters as an array named arguments:

function relate(obj){
  for(var i=1; i<arguments.length; i++){
    obj.adjacencies.push({'nodeTo':arguments[i]});
  }
}

The arguments array is built into every function and stores all the actual information that has been sent into the function. As the first parameter is our object, we need to skip the first parameter and then add the new relationships into the adjacencies array.

Our last data-related function is our highlight function. The highlight function expects one parameter nodeID (that we created in createNode). The goal of the highlight function is to travel through all the data elements and de-highlight all the relationships limited to the one selected element and its relationships.

function highlight(nodeid){
  var selectedIndex = 0;
  for(var i=1; i<dataSource.length; i++){
    if(nodeid!=	dataSource[i].id){
      for(var item in dataSource[i].adjacencies)
      delete dataSource[i].adjacencies[item].data;
    }else{
      selectedIndex = i;
      for(var item in dataSource[i].adjacencies)
      dataSource[i].adjacencies[item].data =  {"$color": "#ddaacc","$lineWidth": 4 };
    }

  }
}

If we don't have highlight, we want to confirm and remove all the instances of the data object within the adjacencies of the node, while if it is selected, we need to add that same object by setting it with its own color and a thicker line.

We are almost done with the data. But when running the application, you will find an issue if we stop here. The issue is within the way the chart system works. If a line was drawn it will not redraw it again. In practical terms, if we select "Ben" while ben isn't the first element in the list, then not all the relationships that "Ben" has with the others will be visible. To fix this issue, we would want to push the selected node to be the first element right after position 0 (main parent), so it will render the selected relationships first:

if(selectedIndex){ 
  var node = dataSource.splice(selectedIndex,1)[0];
  dataSource.splice(1,0,node); 
}

One more thing left is that we need to be able to refresh our content when the user clicks on an element. To accomplish this task, we will need to add an event parameter into the initializing parameter object of jit.Sunburst:

var sb = new $jit.Sunburst({
  injectInto: 'infovis', //id container
     ...
  Events: {
    enable: true,
    type: 'Native',
    //List node connections onClick
    onClick: function(node, eventInfo, e){
      if (!node) return;
          
      highlight(node.id);
      sb.loadJSON(dataSource);
        sb.refresh();
    }
  },
  levelDistance: 120
});

One more thing to note in this sample is the levelDistance property that controls how close/far you are to/from the rendered element (making it bigger or smaller).

var can = document.getElementById("infovis-canvas");
  var context = can.getContext("2d"); 
...