Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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

In this section, you will be introduced to:

  • Key features of the drag-node chart

  • Enabling / Disabling the dragging feature for the nodes

  • Allowing addition, alteration and deletion of nodes, connectors and labels

Key Features of a Drag-node Chart

Salient features of the drag-node chart include:

  • Each data set on the chart can be represented as a drag-able node of various shapes (circles, rectangles, or polygons) and sizes

  • Nodes can contain image and text together

  • Option to set the chart in view or edit mode. In the view mode, the end users can just drag the nodes (unless the feature is explicitly disabled). In edit mode, the users can

    • add, edit, or delete nodes

    • add, edit, or delete connectors

    • add, edit, or delete text labels

  • Links can be defined between any two nodes on the chart. Links can have arrows at both sides or either side. Each link has a label and a strength factor

  • Option to visually add nodes, connectors, and labels at run-time

  • Options to visually edit existing or newly created nodes and connectors at run-time

  • Using JavaScript, it is possible to filter the links dynamically at run-time to show only the n strongest links

  • Using JavaScript, updated positions of node can be retrieved

  • Updated positions of node can be sent back to the server for processing

Here is a sample for Dragnode chart :

FusionCharts will load here..
{ "chart": { "caption": "US Subway Map", "xaxisminvalue": "0", "xaxismaxvalue": "100", "yaxisminvalue": "0", "yaxismaxvalue": "100", "is3d": "0", "showformbtn": "1", "formaction": "resources/php/chart-guide-drag-node-chart-introduction-update.php", "formtarget": "_blank", "formmethod": "POST", "formbtntitle": "Save", "viewmode": "0", "showplotborder": "1", "plotborderthickness": "4", "theme": "fint", "showcanvasborder": "1", "canvasborderalpha": "20", "animation": "0" }, "dataset": [ { "data": [ { "id": "01", "label": "Santa Monica", "color": "#ffffff", "x": "16", "y": "54", "radius": "30", "shape": "circle" }, { "id": "02", "label": "Los Angeles", "color": "#ffffff", "x": "27", "y": "54", "radius": "30", "shape": "circle" }, { "id": "03", "label": "Ontario", "color": "#ffffff", "x": "48", "y": "54", "radius": "30", "shape": "circle" }, { "id": "04", "label": "Phoenix", "color": "#ffffff", "x": "85", "y": "54", "radius": "30", "shape": "circle" }, { "id": "05", "label": "Flagstaff", "color": "#ffffff", "x": "85", "y": "80", "radius": "30", "shape": "circle" }, { "id": "06", "label": "Barstow", "color": "#ffffff", "x": "62", "y": "80", "radius": "30", "shape": "circle" }, { "id": "07", "label": "San Diego", "color": "#ffffff", "x": "35", "y": "30", "radius": "30", "shape": "circle" }, { "id": "08", "label": "San Ysidro", "color": "#ffffff", "x": "40", "y": "12", "radius": "30", "shape": "circle" }, { "id": "09", "label": "Las Vegas", "color": "#ffffff", "x": "68", "y": "93", "radius": "30", "shape": "circle" }, { "id": "10", "label": "", "color": "#ffffff", "x": "12", "y": "98", "radius": "0", "shape": "circle" }, { "id": "11", "label": "", "color": "#ffffff", "x": "100", "y": "80", "radius": "0", "shape": "circle" }, { "id": "12", "label": "", "color": "#ffffff", "x": "99", "y": "40", "radius": "0", "shape": "circle" }, { "id": "13", "label": "Yuma", "color": "#ffffff", "x": "70", "y": "30", "radius": "30", "shape": "circle" }, { "id": "14", "label": "", "color": "#ffffff", "x": "100", "y": "30", "radius": "0", "shape": "circle" } ] } ], "connectors": [ { "color": "#ffffff", "stdthickness": "10", "connector": [ { "strength": "2", "from": "01", "to": "02", "color": "#fec110", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "02", "to": "03", "color": "#fec110", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "03", "to": "04", "color": "#fec110", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "04", "to": "12", "color": "#fec110", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "04", "to": "05", "color": "#a6aaad", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "09", "to": "06", "color": "#0178bc", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "06", "to": "03", "color": "#0178bc", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "03", "to": "07", "color": "#0178bc", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "05", "to": "06", "color": "#f1277d", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "06", "to": "11", "color": "#f1277d", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "02", "to": "07", "color": "#c1c733", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "07", "to": "08", "color": "#c1c733", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "02", "to": "10", "color": "#c1c733", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "07", "to": "13", "color": "#6d6e70", "arrowatstart": "0", "arrowatend": "0" }, { "strength": "2", "from": "13", "to": "14", "color": "#6d6e70", "arrowatstart": "0", "arrowatend": "0" } ] } ] }
{
    "chart": {
        "caption": "US Subway Map",
        "xaxisminvalue": "0",
        "xaxismaxvalue": "100",
        "yaxisminvalue": "0",
        "yaxismaxvalue": "100",
        "is3d": "0",
        "showformbtn": "1",
        "formaction": "resources/php/chart-guide-drag-node-chart-introduction-update.php",
        "formtarget": "_blank",
        "formmethod": "POST",
        "formbtntitle": "Save",
        "viewmode": "0",
        "showplotborder": "1",
        "plotborderthickness": "4",
        "theme": "fint",
        "showcanvasborder": "1",
        "canvasborderalpha": "20",
        "animation": "0"
    },
    "dataset": [
        {
            "data": [
                {
                    "id": "01",
                    "label": "Santa Monica",
                    "color": "#ffffff",
                    "x": "16",
                    "y": "54",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "02",
                    "label": "Los Angeles",
                    "color": "#ffffff",
                    "x": "27",
                    "y": "54",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "03",
                    "label": "Ontario",
                    "color": "#ffffff",
                    "x": "48",
                    "y": "54",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "04",
                    "label": "Phoenix",
                    "color": "#ffffff",
                    "x": "85",
                    "y": "54",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "05",
                    "label": "Flagstaff",
                    "color": "#ffffff",
                    "x": "85",
                    "y": "80",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "06",
                    "label": "Barstow",
                    "color": "#ffffff",
                    "x": "62",
                    "y": "80",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "07",
                    "label": "San Diego",
                    "color": "#ffffff",
                    "x": "35",
                    "y": "30",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "08",
                    "label": "San Ysidro",
                    "color": "#ffffff",
                    "x": "40",
                    "y": "12",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "09",
                    "label": "Las Vegas",
                    "color": "#ffffff",
                    "x": "68",
                    "y": "93",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "10",
                    "label": "",
                    "color": "#ffffff",
                    "x": "12",
                    "y": "98",
                    "radius": "0",
                    "shape": "circle"
                },
                {
                    "id": "11",
                    "label": "",
                    "color": "#ffffff",
                    "x": "100",
                    "y": "80",
                    "radius": "0",
                    "shape": "circle"
                },
                {
                    "id": "12",
                    "label": "",
                    "color": "#ffffff",
                    "x": "99",
                    "y": "40",
                    "radius": "0",
                    "shape": "circle"
                },
                {
                    "id": "13",
                    "label": "Yuma",
                    "color": "#ffffff",
                    "x": "70",
                    "y": "30",
                    "radius": "30",
                    "shape": "circle"
                },
                {
                    "id": "14",
                    "label": "",
                    "color": "#ffffff",
                    "x": "100",
                    "y": "30",
                    "radius": "0",
                    "shape": "circle"
                }
            ]
        }
    ],
    "connectors": [
        {
            "color": "#ffffff",
            "stdthickness": "10",
            "connector": [
                {
                    "strength": "2",
                    "from": "01",
                    "to": "02",
                    "color": "#fec110",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "02",
                    "to": "03",
                    "color": "#fec110",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "03",
                    "to": "04",
                    "color": "#fec110",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "04",
                    "to": "12",
                    "color": "#fec110",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "04",
                    "to": "05",
                    "color": "#a6aaad",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "09",
                    "to": "06",
                    "color": "#0178bc",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "06",
                    "to": "03",
                    "color": "#0178bc",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "03",
                    "to": "07",
                    "color": "#0178bc",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "05",
                    "to": "06",
                    "color": "#f1277d",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "06",
                    "to": "11",
                    "color": "#f1277d",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "02",
                    "to": "07",
                    "color": "#c1c733",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "07",
                    "to": "08",
                    "color": "#c1c733",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "02",
                    "to": "10",
                    "color": "#c1c733",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "07",
                    "to": "13",
                    "color": "#6d6e70",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                },
                {
                    "strength": "2",
                    "from": "13",
                    "to": "14",
                    "color": "#6d6e70",
                    "arrowatstart": "0",
                    "arrowatend": "0"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'dragnode',
    id: 'subwaymap',
    renderAt: 'chart-container',
    width: '800',
    height: '600',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "US Subway Map",
            "xaxisminvalue": "0",
            "xaxismaxvalue": "100",
            "yaxisminvalue": "0",
            "yaxismaxvalue": "100",
            "is3d": "0",
            "showformbtn": "1",
            "formaction": "resources/php/chart-guide-drag-node-chart-introduction-update.php",
            "formtarget": "_blank",
            "formmethod": "POST",
            "formbtntitle": "Save",
            "viewmode": "0",
            "showplotborder": "1",
            "plotborderthickness": "4",
            "theme": "fint",
            "showcanvasborder": "1",
            "canvasborderalpha": "20",
            "animation": "0"
        },
        "dataset": [{
            "data": [{
                "id": "01",
                "label": "Santa Monica",
                "color": "#ffffff",
                "x": "16",
                "y": "54",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "02",
                "label": "Los Angeles",
                "color": "#ffffff",
                "x": "27",
                "y": "54",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "03",
                "label": "Ontario",
                "color": "#ffffff",
                "x": "48",
                "y": "54",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "04",
                "label": "Phoenix",
                "color": "#ffffff",
                "x": "85",
                "y": "54",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "05",
                "label": "Flagstaff",
                "color": "#ffffff",
                "x": "85",
                "y": "80",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "06",
                "label": "Barstow",
                "color": "#ffffff",
                "x": "62",
                "y": "80",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "07",
                "label": "San Diego",
                "color": "#ffffff",
                "x": "35",
                "y": "30",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "08",
                "label": "San Ysidro",
                "color": "#ffffff",
                "x": "40",
                "y": "12",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "09",
                "label": "Las Vegas",
                "color": "#ffffff",
                "x": "68",
                "y": "93",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "10",
                "label": "",
                "color": "#ffffff",
                "x": "12",
                "y": "98",
                "radius": "0",
                "shape": "circle"
            }, {
                "id": "11",
                "label": "",
                "color": "#ffffff",
                "x": "100",
                "y": "80",
                "radius": "0",
                "shape": "circle"
            }, {
                "id": "12",
                "label": "",
                "color": "#ffffff",
                "x": "99",
                "y": "40",
                "radius": "0",
                "shape": "circle"
            }, {
                "id": "13",
                "label": "Yuma",
                "color": "#ffffff",
                "x": "70",
                "y": "30",
                "radius": "30",
                "shape": "circle"
            }, {
                "id": "14",
                "label": "",
                "color": "#ffffff",
                "x": "100",
                "y": "30",
                "radius": "0",
                "shape": "circle"
            }]
        }],
        "connectors": [{
            "color": "#ffffff",
            "stdthickness": "10",
            "connector": [{
                "strength": "2",
                "from": "01",
                "to": "02",
                "color": "#fec110",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "02",
                "to": "03",
                "color": "#fec110",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "03",
                "to": "04",
                "color": "#fec110",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "04",
                "to": "12",
                "color": "#fec110",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "04",
                "to": "05",
                "color": "#a6aaad",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "09",
                "to": "06",
                "color": "#0178bc",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "06",
                "to": "03",
                "color": "#0178bc",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "03",
                "to": "07",
                "color": "#0178bc",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "05",
                "to": "06",
                "color": "#f1277d",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "06",
                "to": "11",
                "color": "#f1277d",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "02",
                "to": "07",
                "color": "#c1c733",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "07",
                "to": "08",
                "color": "#c1c733",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "02",
                "to": "10",
                "color": "#c1c733",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "07",
                "to": "13",
                "color": "#6d6e70",
                "arrowatstart": "0",
                "arrowatend": "0"
            }, {
                "strength": "2",
                "from": "13",
                "to": "14",
                "color": "#6d6e70",
                "arrowatstart": "0",
                "arrowatend": "0"
            }]
        }]
    },
    events: {
        'beforeRender': function(event, args) {
            // creating div for controllers
            var controllers = document.createElement('div'),
                chartRef = event.sender,
                restoreBtn,
                httpRequest,
                //Function to restore data
                restoreData = function() {
                    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                        httpRequest = new XMLHttpRequest();
                    } else if (window.ActiveXObject) { // IE 8 and older
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    httpRequest.onreadystatechange = function() {
                        if (httpRequest.readyState === 4) {
                            chartRef.setXMLUrl('../../resources/xml/chart-guide-drag-node-chart-introduction.xml');
                            alert("Data Restored");
                        } else if (httpRequest.readyState >= 400) {
                            alert("Data Restored Failed");
                        }
                    };

                    httpRequest.open('GET', '../../resources/php/chart-guide-drag-node-chart-introduction-restore.php', true);
                    httpRequest.send(null);
                };

            controllers.setAttribute('id', 'btnCont');

            // Create Button inside div
            controllers.innerHTML = '<input id="restoreXML" type="submit" name="Submit" value="Restore Original Data">';

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            // setting css styles for controllers div
            controllers.style.cssText = "width: 800px; text-align:center;";
            restoreBtn = document.getElementById('restoreXML');

            //Set event listener for check boxes
            restoreBtn.addEventListener && restoreBtn.addEventListener("click", restoreData);
        },
        "datasubmitted": function(e, a) {
            alert("Successfully Saved");
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>
Top