Grouped Network chart
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
chart= new NetChart({
"navigation": {
"focusNodeExpansionRadius": 2,
"initialNodes": [
"m-1"
],
"mode": "focusnodes"
},
"style": {
"node": {
"display": "image",
"lineWidth": 2,
"lineColor": "#2fc32f",
"imageCropping": true
},
"nodeStyleFunction": function(node) {
node.aura = node.data.auras;
node.image = "https://zoomcharts.com/dvsl/data/net-chart/friend-net/"+node.id+".png";
node.label = node.data.name;
}
},
"auras": {
"cellSize": 10,
"overlap": true,
"enabled": true,
"defaultStyle": {
"showInLegend": true,
"shadowBlur": 35
}
},
"container": "demo",
"data": [
{
"url": "/dvsl/data/net-chart/friend-net-auras.json"
}
],
"toolbar": {
"fullscreen": true,
"enabled": true
},
"interaction": {
"resizing": {
"enabled": false
}
}
})Data
Data
Download Data
{
"nodes": [
{
"id": "m-1",
"age": 20,
"name": "Joe",
"loaded": true,
"auras": [
"HR",
"Sales"
]
},
{
"id": "m-2",
"age": 15,
"name": "Fred",
"loaded": true,
"auras": [
"Sales",
"HR"
]
},
{
"id": "m-3",
"age": 16,
"name": "Tom",
"loaded": true,
"auras": "Board"
},
{
"id": "m-4",
"age": 35,
"name": "Robert",
"loaded": true,
"auras": "Sales"
},
{
"id": "m-5",
"age": 38,
"name": "Mark",
"loaded": true,
"auras": [
"Board",
"Administration"
]
},
{
"id": "m-6",
"age": 42,
"name": "Jason",
"loaded": true,
"auras": [
"Administration",
"Marketing"
]
},
{
"id": "m-7",
"age": 37,
"name": "Bill",
"loaded": true,
"auras": [
"Accounting"
]
},
{
"id": "m-8",
"age": 60,
"name": "Andre",
"loaded": true,
"auras": [
"Accounting"
]
},
{
"id": "m-9",
"age": 63,
"name": "Daniel",
"loaded": true,
"auras": [
"Accounting",
"IT"
]
},
{
"id": "m-10",
"age": 17,
"name": "Thomas",
"loaded": true,
"auras": "IT"
},
{
"id": "m-11",
"age": 21,
"name": "Sergejs",
"loaded": true,
"auras": "IT"
},
{
"id": "m-12",
"age": 26,
"name": "Bryon",
"loaded": true,
"auras": ""
},
{
"id": "m-13",
"age": 29,
"name": "Toby",
"loaded": true,
"auras": "Administration"
},
{
"id": "f-1",
"age": 28,
"name": "Anna",
"loaded": true,
"auras": "HR"
},
{
"id": "f-2",
"age": 21,
"name": "Wendy",
"loaded": true,
"auras": [
"HR",
"Sales"
]
},
{
"id": "f-3",
"age": 17,
"name": "Dina",
"loaded": true,
"auras": "HR"
},
{
"id": "f-4",
"age": 26,
"name": "Cate",
"loaded": true,
"auras": "Board"
}
],
"links": [
{
"id": "l01",
"from": "m-1",
"to": "f-1",
"type": "friend"
},
{
"id": "l02",
"from": "m-1",
"to": "f-2",
"type": "friend"
},
{
"id": "l03",
"from": "m-1",
"to": "f-3",
"type": "friend"
},
{
"id": "l04",
"from": "m-1",
"to": "f-4",
"type": "friend"
},
{
"id": "l07",
"from": "m-2",
"to": "f-2",
"type": "collegue"
},
{
"id": "l15",
"from": "m-3",
"to": "f-4",
"type": "friend"
},
{
"id": "l23",
"from": "m-5",
"to": "f-4",
"type": "collegue"
},
{
"id": "l28",
"from": "m-5",
"to": "m-6",
"type": "friend"
},
{
"id": "l29",
"from": "m-6",
"to": "m-7",
"type": "friend"
},
{
"id": "l30",
"from": "m-7",
"to": "m-8",
"type": "friend"
},
{
"id": "l31",
"from": "m-8",
"to": "m-9",
"type": "friend"
},
{
"id": "l32",
"from": "m-9",
"to": "m-10",
"type": "friend"
},
{
"id": "l33",
"from": "m-10",
"to": "m-11",
"type": "friend"
},
{
"id": "l34",
"from": "m-11",
"to": "m-12",
"type": "friend"
},
{
"id": "l35",
"from": "m-12",
"to": "m-13",
"type": "friend"
},
{
"id": "l36",
"from": "m-13",
"to": "m-5",
"type": "friend"
},
{
"id": "l106",
"from": "m-7",
"to": "m-9",
"type": "collegue"
},
{
"id": "l141",
"from": "f-2",
"to": "m-4",
"type": "collegue"
}
]
}