Back

Style is embedded in data

Nodes and links have style attribute in data and no style functions are used.

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":"Base", "fillColor":"#09c"}},
            {"id":"n2", "loaded":true, "style":{"label":"Asset 1", "fillColor":"rgba(47,195,47,1)"}},
            {"id":"n3", "loaded":true, "style":{"label":"Asset 2", "fillColor":"rgba(47,195,47,1)"}},
            {"id":"n4", "loaded":true, "style":{"label":"Asset 3", "fillColor": "rgba(222,103,44,1)"}},
            {"id":"n5", "loaded":true, "style":{"label":"Asset 4", "fillColor": "rgba(234,180,4,1)"}}
        ],
        "links":[
            {"id":"l1","from":"n1", "to":"n2", "style":{"fillColor":"rgba(47,195,47,0.5)", "toDecoration":"arrow", "label":"OK"}},
            {"id":"l2","from":"n2", "to":"n4", "style":{"fillColor":"rgba(222,103,44,0.5)", "toDecoration":"arrow", "label":"Fail"}},
            {"id":"l3","from":"n1", "to":"n3", "style":{"fillColor":"rgba(47,195,47,0.5)", "toDecoration":"arrow", "label":"OK"}},
            {"id":"l4","from":"n1", "to":"n5", "style":{"fillColor":"rgba(234,180,4,0.5)", "toDecoration":"arrow", "label":"Pending"}}
        ]
    };

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

    function nodeStyle(node) {
        var min = 20;
        var max = 50;
        var radius = Math.floor(Math.random() * (max - min)) + min;
        node.radius = radius;
    }

Data

Data 
//No separate data for this example