Hierarchy layout of nodes
Positions nodes in levels depending on their relations
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 },
navigation:{
focusNodeExpansionRadius: 2,
initialNodes: ["syslog"],
mode:"focusnodes"
},
style:{
node:{display:"image", lineWidth:2, lineColor: "red", imageCropping: true},
nodeLabel:{
padding:3,
backgroundStyle: {
fillColor:'#09c'
},
textStyle: {
fillColor: "white"
}
},
nodeStyleFunction: nodeStyle,
linkStyleFunction: linkStyle
},
data: { url:"/dvsl/data/net-chart/bubbles.json" },
layout:{
mode:"hierarchy",
nodeSpacing: 45, // horizontal spacing between nodes
rowSpacing: 80 // vertical spacing between node rows in the hierarchy layout
}
});
function nodeStyle(node){
node.radius = 15;
node.lineWidth = 0;
}
function linkStyle(link){
link.toDecoration = "arrow";
if (link.background){
link.fillColor = "#CCC";
link.radius = 1;
}else{
link.radius = 1;
link.fillColor = "#999";
}
}
Data
Data
Download Data
{
"nodes": [
{
"id": "n0",
"style": {
"label": "ALL DATA",
"radius": 189337,
"lineColor": "#2c3e50",
"fillColor": "#2fc32f",
"line-width": "5"
},
"loaded": true
},
{
"id": "win_ev",
"loaded": true,
"style": {
"label": "Windows Events",
"radius": 12157,
"fillColor": "#b0dc0b",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==win_ev"
}
},
{
"id": "win_ev_Nt",
"loaded": true,
"style": {
"label": "Norcha Test",
"radius": 12157,
"fillColor": "#d35400",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==win_ev :server==Nt"
}
},
{
"id": "win_ev_Nt_192.168.0.167",
"loaded": true,
"style": {
"label": "192.168.0.167",
"radius": 12157,
"fillColor": "#f39c12",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==win_ev :server==Nt :host==192.168.0.167"
}
},
{
"id": "win_ev_Nt_192.168.0.167o1",
"loaded": true,
"style": {
"label": "Output1",
"radius": 12157,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==win_ev :server==Nt :host==192.168.0.167 :source==o1"
}
},
{
"id": "syslog",
"loaded": true,
"style": {
"label": "Syslog",
"radius": 62799,
"fillColor": "#b0dc0b",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog"
}
},
{
"id": "syslog_Nt",
"loaded": true,
"style": {
"label": "Norcha Test",
"radius": 40,
"fillColor": "#d35400",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog :server==Nt"
}
},
{
"id": "syslog_Nt_192.168.0.167",
"loaded": true,
"style": {
"label": "192.168.0.167",
"radius": 40,
"fillColor": "#f39c12",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog :server==Nt :host==192.168.0.167"
}
},
{
"id": "syslog_Nt_192.168.0.167cron",
"loaded": true,
"style": {
"label": "Cron",
"radius": 40,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog :server==Nt :host==192.168.0.167 :source==cron"
}
},
{
"id": "syslog_s156",
"loaded": true,
"style": {
"label": "Server 31.156",
"radius": 62759,
"fillColor": "#d35400",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog :server==s156"
}
},
{
"id": "syslog_s156_192.168.31.156",
"loaded": true,
"style": {
"label": "192.168.31.156",
"radius": 62759,
"fillColor": "#f39c12",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog :server==s156 :host==192.168.31.156"
}
},
{
"id": "syslog_s156_192.168.31.156user",
"loaded": true,
"style": {
"label": "User log",
"radius": 10296,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog :server==s156 :host==192.168.31.156 :source==user"
}
},
{
"id": "syslog_s156_192.168.31.156sys",
"loaded": true,
"style": {
"label": "Syslog",
"radius": 15737,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog :server==s156 :host==192.168.31.156 :source==sys"
}
},
{
"id": "syslog_s156_192.168.31.156mess",
"loaded": true,
"style": {
"label": "Messages",
"radius": 36726,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==syslog :server==s156 :host==192.168.31.156 :source==mess"
}
},
{
"id": "cps",
"loaded": true,
"style": {
"label": "CPS2",
"radius": 7943,
"fillColor": "#b0dc0b",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==cps"
}
},
{
"id": "cps_Nt",
"loaded": true,
"style": {
"label": "Norcha Test",
"radius": 7943,
"fillColor": "#d35400",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==cps :server==Nt"
}
},
{
"id": "cps_Nt_192.168.0.167",
"loaded": true,
"style": {
"label": "192.168.0.167",
"radius": 7943,
"fillColor": "#f39c12",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==cps :server==Nt :host==192.168.0.167"
}
},
{
"id": "cps_Nt_192.168.0.167cperr",
"loaded": true,
"style": {
"label": "CPS error",
"radius": 2,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==cps :server==Nt :host==192.168.0.167 :source==cperr"
}
},
{
"id": "cps_Nt_192.168.0.167CPSacc",
"loaded": true,
"style": {
"label": "CPS access",
"radius": 7941,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==cps :server==Nt :host==192.168.0.167 :source==CPSacc"
}
},
{
"id": "apache2acc",
"loaded": true,
"style": {
"label": "Apache2 access",
"radius": 74545,
"fillColor": "#ec2e2e",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2acc"
}
},
{
"id": "apache2acc_Nt",
"loaded": true,
"style": {
"label": "Norcha Test",
"radius": 63104,
"fillColor": "#d35400",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2acc :server==Nt"
}
},
{
"id": "apache2acc_Nt_192.168.0.167",
"loaded": true,
"style": {
"label": "192.168.0.167",
"radius": 63104,
"fillColor": "#f39c12",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2acc :server==Nt :host==192.168.0.167"
}
},
{
"id": "apache2acc_Nt_192.168.0.167apactest",
"loaded": true,
"style": {
"label": "Apache2",
"radius": 63104,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2acc :server==Nt :host==192.168.0.167 :source==apactest"
}
},
{
"id": "apache2acc_s156",
"loaded": true,
"style": {
"label": "Server 31.156",
"radius": 11441,
"fillColor": "#d35400",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2acc :server==s156"
}
},
{
"id": "apache2acc_s156_192.168.31.156",
"loaded": true,
"style": {
"label": "192.168.31.156",
"radius": 11441,
"fillColor": "#f39c12",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2acc :server==s156 :host==192.168.31.156"
}
},
{
"id": "apache2acc_s156_192.168.31.156a_acc",
"loaded": true,
"style": {
"label": "Apsche access",
"radius": 11441,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2acc :server==s156 :host==192.168.31.156 :source==a_acc"
}
},
{
"id": "apache2err",
"loaded": true,
"style": {
"label": "Apache2 error",
"radius": 31893,
"fillColor": "#b0dc0b",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2err"
}
},
{
"id": "apache2err_s156",
"loaded": true,
"style": {
"label": "Server 31.156",
"radius": 31893,
"fillColor": "#d35400",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2err :server==s156"
}
},
{
"id": "apache2err_s156_192.168.31.156",
"loaded": true,
"style": {
"label": "192.168.31.156",
"radius": 31893,
"fillColor": "#f39c12",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2err :server==s156 :host==192.168.31.156"
}
},
{
"id": "apache2err_s156_192.168.31.156a_err",
"loaded": true,
"style": {
"label": "Apsche error",
"radius": 31893,
"fillColor": "#2980b9",
"url": "http:\/\/localhost\/GOL_GUI\/gol-gui\/web\/gol_search\/searchindex?simpl=:sourcetype==apache2err :server==s156 :host==192.168.31.156 :source==a_err"
}
}
],
"links": [
{
"id": "win_ev",
"from": "n0",
"to": "win_ev",
"name": "win_ev",
"share": 0
},
{
"id": "win_ev_Nt",
"from": "win_ev",
"to": "win_ev_Nt",
"name": "Nt",
"share": 0
},
{
"id": "win_ev_Nt_192.168.0.167",
"from": "win_ev_Nt",
"to": "win_ev_Nt_192.168.0.167",
"name": "192.168.0.167",
"share": 0
},
{
"id": "win_ev_Nt_192.168.0.167o1",
"from": "win_ev_Nt_192.168.0.167",
"to": "win_ev_Nt_192.168.0.167o1",
"name": "o1",
"share": 0
},
{
"id": "syslog",
"from": "n0",
"to": "syslog",
"name": "syslog",
"share": 0
},
{
"id": "syslog_Nt",
"from": "syslog",
"to": "syslog_Nt",
"name": "Nt",
"share": 0
},
{
"id": "syslog_Nt_192.168.0.167",
"from": "syslog_Nt",
"to": "syslog_Nt_192.168.0.167",
"name": "192.168.0.167",
"share": 0
},
{
"id": "syslog_Nt_192.168.0.167cron",
"from": "syslog_Nt_192.168.0.167",
"to": "syslog_Nt_192.168.0.167cron",
"name": "cron",
"share": 0
},
{
"id": "syslog_s156",
"from": "syslog",
"to": "syslog_s156",
"name": "s156",
"share": 0
},
{
"id": "syslog_s156_192.168.31.156",
"from": "syslog_s156",
"to": "syslog_s156_192.168.31.156",
"name": "192.168.31.156",
"share": 0
},
{
"id": "syslog_s156_192.168.31.156user",
"from": "syslog_s156_192.168.31.156",
"to": "syslog_s156_192.168.31.156user",
"name": "user",
"share": 0
},
{
"id": "syslog_s156_192.168.31.156sys",
"from": "syslog_s156_192.168.31.156",
"to": "syslog_s156_192.168.31.156sys",
"name": "sys",
"share": 0
},
{
"id": "syslog_s156_192.168.31.156mess",
"from": "syslog_s156_192.168.31.156",
"to": "syslog_s156_192.168.31.156mess",
"name": "mess",
"share": 0
},
{
"id": "cps",
"from": "n0",
"to": "cps",
"name": "cps",
"share": 0
},
{
"id": "cps_Nt",
"from": "cps",
"to": "cps_Nt",
"name": "Nt",
"share": 0
},
{
"id": "cps_Nt_192.168.0.167",
"from": "cps_Nt",
"to": "cps_Nt_192.168.0.167",
"name": "192.168.0.167",
"share": 0
},
{
"id": "cps_Nt_192.168.0.167cperr",
"from": "cps_Nt_192.168.0.167",
"to": "cps_Nt_192.168.0.167cperr",
"name": "cperr",
"share": 0
},
{
"id": "cps_Nt_192.168.0.167CPSacc",
"from": "cps_Nt_192.168.0.167",
"to": "cps_Nt_192.168.0.167CPSacc",
"name": "CPSacc",
"share": 0
},
{
"id": "apache2acc",
"from": "n0",
"to": "apache2acc",
"name": "apache2acc",
"share": 0
},
{
"id": "apache2acc_Nt",
"from": "apache2acc",
"to": "apache2acc_Nt",
"name": "Nt",
"share": 0
},
{
"id": "apache2acc_Nt_192.168.0.167",
"from": "apache2acc_Nt",
"to": "apache2acc_Nt_192.168.0.167",
"name": "192.168.0.167",
"share": 0
},
{
"id": "apache2acc_Nt_192.168.0.167apactest",
"from": "apache2acc_Nt_192.168.0.167",
"to": "apache2acc_Nt_192.168.0.167apactest",
"name": "apactest",
"share": 0
},
{
"id": "apache2acc_s156",
"from": "apache2acc",
"to": "apache2acc_s156",
"name": "s156",
"share": 0
},
{
"id": "apache2acc_s156_192.168.31.156",
"from": "apache2acc_s156",
"to": "apache2acc_s156_192.168.31.156",
"name": "192.168.31.156",
"share": 0
},
{
"id": "apache2acc_s156_192.168.31.156a_acc",
"from": "apache2acc_s156_192.168.31.156",
"to": "apache2acc_s156_192.168.31.156a_acc",
"name": "a_acc",
"share": 0
},
{
"id": "apache2err",
"from": "n0",
"to": "apache2err",
"name": "apache2err",
"share": 0
},
{
"id": "apache2err_s156",
"from": "apache2err",
"to": "apache2err_s156",
"name": "s156",
"share": 0
},
{
"id": "apache2err_s156_192.168.31.156",
"from": "apache2err_s156",
"to": "apache2err_s156_192.168.31.156",
"name": "192.168.31.156",
"share": 0
},
{
"id": "apache2err_s156_192.168.31.156a_err",
"from": "apache2err_s156_192.168.31.156",
"to": "apache2err_s156_192.168.31.156a_err",
"name": "a_err",
"share": 0
}
]
}