Back

Chart.addData adds nodes and links to the chart

With 'chart.addData', you can call a function that adds more nodes or links to the network chart. In this example, addData is activated by a graphDoubleClick event: double click on a node to spawn a new node and link.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    var data = {
        "nodes":[
            {"id":"n1", "loaded":true, "style":{"label":"Node1"}},
            {"id":"n2", "loaded":true, "style":{"label":"Node2"}},
            {"id":"n3", "loaded":true, "style":{"label":"Node3"}}
        ],
        "links":[
            {"id":"l1","from":"n1", "to":"n2"},
            {"id":"l2","from":"n2", "to":"n3"},
            {"id":"l3","from":"n3", "to":"n1"}
        ]
    };

    var chart = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { preloaded: data },
        events:{
            onClick: graphClick,
            onDoubleClick: graphDoubleClick}
    });

    var nextId = 4;

    function graphClick(event){
        if (!event.clickNode && !event.clickLink){//test the click was on empty space
            chart.addData({nodes:[{"id":"n"+nextId, "x":event.chartX, "y":event.chartY}]});
            nextId += 1;
        }
    }

    function graphDoubleClick(event){
        if (event.clickNode){//test the click was on a node
            chart.addData({nodes:[{"id":"n"+nextId}], links:[{"id":"ll"+nextId, from:event.clickNode.id, to:"n"+nextId}]});
            nextId += 1;
        }
    }

Data

Data 
//No separate data for this example