Back

Network Graph - company network, with icons

JavaScript org chart with icons for each node. This example visualizes anonymous company data and shows relationships between employees and stakeholders.

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