Back

Network Graph - company network, with icons

Anonymous company data.

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 t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data:{ url: "/data/net-chart/company-network-small.json" },
        navigation:{
            mode:"focusnodes",
            initialNodes:["1886"],
            focusNodeExpansionRadius: 1
        },
        style:{
            nodeStyleFunction: nodeStyle,
            linkStyleFunction: linkStyle
        },
        interaction: {
             resizing: {enabled: false}
        }
    });

    function nodeStyle(node){
        var image = null;
        if (node.data.type == "person"){
            image = "/data/net-chart/node-icons-male.png";
            node.label = "Person";
        }else{
            image = "/data/net-chart/node-icons-case.png";
            node.label = "Company";
        }
        var sliceNo = (node.data.foreign)? 1 : 0;
        var sliceSize = 239;
        node.image = image;
        node.imageSlicing = [0, sliceNo*sliceSize,sliceSize,sliceSize];
    }

    function linkStyle(link){
        if (link.data.type == "share"){
            link.fillColor = "limegreen";
            link.label = (link.data.shares_perc*100).toFixed(0) + "%";
            link.radius = 2;
        } else{
            link.fillColor = "lightgray";
            link.radius = 1;
        }
    }

Data

Data 
//No separate data for this example