Back

Fixed coordinated example

Use node.x and node.y in data together with layout.mode = "static" to control node placement.

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, x:100, y:0},
            {"id":"n2", "loaded":true, x:0,y:0},
            {"id":"n3", "loaded":true, x:0,y:100},
            {"id":"n4", "loaded":true, x:50,y:90},
            {"id":"n5", "loaded":true, x:120,y:140},
            {"id":"n6", "loaded":true, x:50,y:190},
            {"id":"n7", "loaded":true, x:0,y:180}
        ],
        "links":[
            {"id":"l1","from":"n1", "to":"n2"},
            {"id":"l2","from":"n2", "to":"n3"},
            {"id":"l3","from":"n3", "to":"n4"},
            {"id":"l4","from":"n4", "to":"n5"},
            {"id":"l5","from":"n5", "to":"n6"},
            {"id":"l6","from":"n6", "to":"n7"}
        ]
    };

    var t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        style:{node:{radius:20}},
        layout:{mode:"static"}
    });

    setTimeout(function(){t.addData(data)}, 200);

Data

Data 
//No separate data for this example