Network graph with glyphicons
Simple example with nodes and glypicons (as fonts) on top of them
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 = [
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
];
var linksArray = [
'',
'',
'',
'',
'',
'',
'',
''
];
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: [
{
url: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css',
required: function() { return true;}
}
]
},
layout: {
aspectRatio: true,
nodeSpacing: 80
}
});
Data
Data
//No separate data for this example