Tree Charts

Note: See our Tree Module Gallery for inspiration on all the different tree chart possibilities.

Tree Chart Type

To specify the chart type, add a type attribute to the chart object. Our standard tree chart (aka network diagram) is specified by the tree value.

{
  type: 'tree'
}

Graph Tree Chart

To create a graph tree chart, set aspect: 'graph in the options object. Graph tree charts have a specific way of entering and linking node data.

Family Nodes

For this type of tree chart, there will be a main node (family node) object that will link to other nodes that will contain the information, such as the images. Family node objects will have a few attributes needed for it to work. First, you'll need to add the type attribute with a value of 'node' to your series array, meaning each series will be a floating node.

Each object will also need the id attribute. This main node holds the family trees together and will be called n1, n2, n3 and so forth.

Note: You can include an optional cls attribute to set a class on the object for styling (discussed further below).

A standard family node will take this format:

{
  type: 'node', 
  id: 'n1', 
  cls : 'fam', //optional class for styling
  text: '', //optional text for label- empty string value for family nodes
  dataFullname: '' //optional custom token- empty string value for family nodes
}

With each new family or group on the graph tree charts, we need to have a new hub node so that the families will have their own hub to link to (the id values of n1, n2 and so forth). The best way to organize these for ease of reading and use would be to have the main hub series above the same family series that will be tied to that hub. An example is:

{
  series: [
    { // main node hub 1
      type: 'node',
      id: 'n1',
      cls: 'fam',
      text: ' ',
      dataFullName: ''
    },
    {
      type: 'node',
      id: 'Ned Stark',
    },
    {
      type: 'node',
      id: 'Brandon Stark',
      text: 'Brandon',
      dataFullName: 'Brandon Stark',
    },
    { // main node hub 2
      type: 'node',
      id: 'n2',
      cls: 'fam',
      text: ' ',
      dataFullName: ''
    },
    {
      type: 'node',
      id: 'Lyarra Stark',
    },
  ]
}

Data Nodes

With each main node hub, we can link other data objects to it. The data node objects will have a few attributes that we need to fill out, the first being type: 'node'. Furthermore, we need to assign an id to this object so that we can target and link it to the hub nodes. The id attribute for data nodes can be assigned anything and will most likely describe what the data node represents.

Adding a text attribute will give your node a label. dataFullname is a custom token that can be used to display more information in your tooltips. For family node objects, these attributes take empty strings as values.

Note: You can include an optional cls attribute to set a class on the object for styling (discussed further below).

A standard data node will take this format:

{
  series: [
    { //data node object
      type: 'node',
      id: 'Ned Stark',
      text: 'Ned',
      dataFullName: 'Ned Stark',
    },
  ]
}

Link Objects

Once we have our families and data nodes set, we can link them together using link objects in the same series array. First, you'll need the type attribute with a value of 'link'.

Link objects will target the id attribute and draw a link from the source value to the target value. In our case, the source will be the main node hubs of n1, n2 and n3, and the target will be the id of data nodes.

Every data node will need a link object so that it will be connected to the chosen hub node. A data node can be linked to multiple family trees by linking them to multiple hub nodes.

{
  series:[
    {
      type: 'link',
      source: 'n1',
      target: 'Ned Stark'
    },
  ]
}

Link-Node Attraction and Interactions

For graph tree charts, the springLength, attractionConstant, repulsionConstant, and repulsionDistanceFactor attributes will determine the length, repulsion, attraction and interactions of the links and nodes.

The attractionConstant and repulsionConstant attributes are used to determine the amount of magnetization between each node in a graph tree chart . The constants used in the Game of Thrones demo gives the graph tree chart a balanced amount of distance and attraction:

{
  options: {
    aspect: 'graph',
    springLength: 75,
    attractionConstant: 0.8,
    repulsionConstant: 4000,
    repulsionDistanceFactor: 20,
  }
}

Node Styling

To style individual nodes, create a style object within the applicable series object. This is where we will be able to set the backgroundImage, size and many other ZingChart styling basics for the nodes.

Note: When using backgroundImage, it is useful to use background-fit: 'xy' so that the image will be centered and show properly inside the small node area.

Note: Learn more about styling nodes with our Chart Plot & Series Styling Tutorial.

{
  series:[
    {
      type: 'node',
      style: {
        "background-fit": "xy",
        backgroundImage: "https://i.imgur.com/OFrvsvv.png"
      }
    },
  ]
}

To style hub nodes, use the node[cls-fam] object inside the options object. node[cls-fam] can take the same attributes as the node objects except that it will target the hub nodes instead of the data nodes. The cls-fam nomenclature stems from how we set the series array in the tree chart.

{
  options:{
    'node[cls-fam]': {
      size: 12,
      borderWidth: 2,
      borderColor: '#000',
      backgroundColor: 'white',
      label: {
        visible: false
      }
    },
  }
}

Methods

To update the tree, you must use the setdata method.

zingchart.exec('myChart', 'setdata', {
  data: chartConfigObj
});