Back

Preloaded data for NetChart

Simple network chart example with data embedded directly into settings object.

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":{ "fillColor": "rgba(236,46,46,0.8)", "label":"Node1"}},
            {"id":"n2", "loaded":true, "style":{ "fillColor": "rgba(47,195,47,0.8)", "label":"Node2"}},
            {"id":"n3", "loaded":true, "style":{ "fillColor": "rgba(28,124,213,0.8)", "label":"Node3"}}
        ],
        "links":[
            {"id":"l1","from":"n1", "to":"n2", "style":{"fillColor":"rgba(236,46,46,1)", "toDecoration":"arrow"}},
            {"id":"l2","from":"n2", "to":"n3", "style":{"fillColor":"rgba(47,195,47,1)", "toDecoration":"arrow"}},
            {"id":"l3","from":"n3", "to":"n1", "style":{"fillColor":"rgba(28,124,213,1)", "toDecoration":"arrow"}}
        ]
    };

    var t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { preloaded: data }
    });

Data

Data 
//No separate data for this example