Back

Style is embedded in data

In this example, node and link style attributes, such as 'fillColor', 'toDecoration', and 'label', are referenced from data, instead of using style functions.

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