Drag-node Chart > Overview

The drag node chart is a specialized type of chart where each data set is shown on the chart as a drag-able node. Perfect for network diagrams, hierarchy structures etc., this chart provides a highly intuitive interface for your end users to visually adjust related entities, link them and even add new ones. You can take visual inputs from your users using this chart and then submit the final positions of the nodes to your scripts for further processing.

Key features of this chart are:

  • Each data set on the chart can be represented as a drag-able node of various shapes and sizes - Circles, Rectangles, Polygons
  • Nodes can contain image and text together
  • Option to set the chart in view or edit mode. In view mode, the end user can just drag the nodes (unless allowDrag is not explicitly set to 0 for that node/data-set). In edit mode, the user can add/delete nodes, add/delete connectors etc.
  • Links can be defined between any two nodes on the chart. Links can have arrows at both side or any side. Each link has a label and a strength factor.
  • Option to visually add nodes and connectors at run-time
  • Using JavaScript, it's possible to filter the links dynamically at run-time to show only the n strongest links.
  • Each node can have a link which can be activated using the context menu. End users can switch between drag mode and link mode.
  • End users have option to pin/un-pin a node to allow/disallow dragging of that particular node.
  • Updated positions of node can be sent back to server for processing.

A very basic drag-node chart looks as under:

And the XML for same can be listed as under:
<chart palette='2' xAxisMinValue='0' xAxisMaxValue='100' yAxisMinValue='0' yAxisMaxValue='100' is3D='1' showFormBtn='1' viewMode='0'>
   <dataset seriesName='DS1'>
      <set x='12' y='79' width='70' height='56' name='Node 1 with a long label' color='FE3233' id='1'/>
      <set x='59' y='15' width='40' height='56' name='Node 2' color='FE9191' id='2' link='n-http://www.InfoSoftGlobal.com'/>
      <set x='88' y='75' radius='37' shape='circle' name='Node 3' color='62D0FE' id='3' link='n-http://www.InfoSoftGlobal.com'/>
      <set x='33' y='35' radius='37' shape='circle' name='Node 4' color='FE8181' id='4' link='n-http://www.InfoSoftGlobal.com'/>
      <set x='40' y='85' width='45' height='67' name='Node 5' color='FE7272' BorderColor='ff5904' id='5' />
      <set x='69' y='85' width='45' height='67' name='Node 6' color='72D4FE' id='6' link='n-http://www.InfoSoftGlobal.com'/>
      <set x='87' y='45' radius='47' shape='polygon' numSides='3' name='Node 7' color='FE5151' id='7' link='n-http://www.InfoSoftGlobal.com'/>
      <set x='65' y='60' radius='47' shape='polygon' numSides='5' name='Node 8' color='FE9191' id='8' link='n-http://www.InfoSoftGlobal.com'/>
      <set x='12' y='20' radius='37' shape='circle' name='Node 9' color='33C1FE' id='9' link='n-http://www.InfoSoftGlobal.com'/>
      <set x='80' y='12' radius='47' shape='polygon' numSides='4' name='Node 10' color='33C1FE' id='10' link='n-http://www.InfoSoftGlobal.com'/>
   </dataset>
   <connectors color='FF0000' stdThickness='5'>
      <connector strength='0.96' label='link label' from='1' to='9' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.8' label='link12' from='1' to='5' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.8' label='link2' from='1' to='8' color='BBBB00' />
      <connector strength='0.3' label='link3' from='1' to='4' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.4' label='link4' from='2' to='4' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.6' label='link5' from='4' to='2' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.33' label='link1' from='2' to='8' color='BBBB00'/>
      <connector strength='0.66' label='link7' from='8' to='3' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.7' label='link6' from='4' to='5' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.6' from='4' to='8' color='FF5904' arrowAtStart='1' arrowAtEnd='1'/>
      <connector strength='0.6' label='link9' from='5' to='8' color='BBBB00' />
      <connector strength='0.5' label='link10' from='7' to='8' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' />
      <connector strength='0.3' label='link11' from='7' to='10' color='BBBB00'/>
   </connectors>
</chart>
The end user can drag any node in the above chart (unless allowDrag for any node is explicity set to 0), as shown below:
If for some purpose, the user doesn't want any node to be drag-able, he can pin it by using the right click context menu of any node. That node cannot be then dragged unless un-pinned (using the same context menu).
In edit mode, the end user can delete a node by right clicking on a node and then selecting "Delete Node".
The node and its attached connectors would then be deleted, as shown below:
The user can also selectively delete connectors between any two nodes by right clicking on connector and then selecting "Delete Connector".
Deleted connector:
You can define links for each node on the chart. When you then view the chart, the nodes will still be drag-able (unless you set the parameter to enable links when started). The end user can switch between link mode and drag mode using the context menu.
When in edit mode, the end user can add a node by selecting "Add a node" option from the context menu.

This presents a dialog box to enter the following node information.

  • Id represents the unique identifier for the node.
  • Dataset represents the series name of the data-set to which this new node will belong to. The node will inherit the visual properties defined for the data-set.
  • Label represents the label for the new node
  • Shape lets you choose the shape for new node. You can choose rectangle, circle or polygon (with customizable number of sides)
  • You can also add an image to the node by checking the "Image" check box.
  • Width, height or radius depending on shape chosen
When the user now clicks Submit, he'll see the new node as shown below:
The user can now connect this node to other nodes by using the context menu of the new node.

This pops up a dialog box, as shown below, requesting the following information:

  • Label of the link (connector)
  • Strength of the connector. Strength represents a numeric value between 0 and 2 to help you define various thickness for different connectors. The strength value gets multiplied by stdThickness parameter to render the thickness of line.
  • Node to which this node should connect to.
  • Whether to show the connector as dashed?
  • Whether to include arrows at the start and end of the connector line?
The connector would then be visible as under: