Back

Network graph with glyphicons

JavaScript network diagram that shows all connected devices in a network. Link labels show glyphicons from a font (referenced from an external .css file in 'assets'). Glyphicons credit: FontAwesome

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 nodesArray = [
        '&#xf179;',
        '&#xf268;',
        '&#xf282;',
        '&#xf108;',
        '&#xf109;',
        '&#xf11c;',
        '&#xf007;',
        '&#xf17a;',
        '&#xf07c;',
        '&#xf02f;',
        '&#xf1c0;',
        
    ];
    
    var linksArray = [
        '&#xf135;',
        '&#xf0c4;',
        '&#xf293;',
        '&#xf0ee;',
        '&#xf1eb;',
        '&#xf119;',
        '&#xf164;',
        '&#xf127;'
    ];
    
    var data = {nodes:[],links:[]};
    for (var i in nodesArray) {
        var nodeId = nodesArray[i].replace('&#', '').replace(';', '');
        var node = { id: nodeId,  style:{ label:nodesArray[i]} };
        data.nodes.push(node);
        var maximumLinks = Math.floor(Math.random() * nodesArray.length);
        maximumLinks = maximumLinks >= 1 ? 1 : maximumLinks;
        for (var j=0; j<=maximumLinks; j++) {
            var position = Math.floor(Math.random() * nodesArray.length);
            var nextNodeId = nodesArray[position].replace('&#', '').replace(';', '');
            var linkId = nodeId + '-' + nextNodeId;
            linkposition = Math.floor(Math.random() * linksArray.length);
            var link = {id: linkId, from: nodeId, to: nextNodeId, style:{ label: linksArray[linkposition]}};
            var linkFounded = false;
            for (var k in data.links) {
                if (data.links[k].id == linkId) {
                    linkFounded = true;
                }
            }
            if (nodeId != nextNodeId && linkFounded == false) {
                data.links.push(link);
            }
        }
    }

    var t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: null },
        data: { preloaded: data },
        style: {
            nodeStyleFunction: function(node) {
                node.label = "";
                node.items.push({
                    text: '&#' + node.data.id + ';',
                });
            },
            item: {
                text: "",
                textStyle: {
                    font: "30px FontAwesome",
                    shadowOffsetY: 1
                }
            },
            linkLabel: {
                textStyle: {
                    font: "20px FontAwesome"
                }
            }
        },
        advanced: {
            assets: ['https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css']
        },
        layout: {
            aspectRatio: true,
            nodeSpacing: 80
    	}
    });

Data

Data 
//No separate data for this example