Back

Flow chart

Simple JavaScript flow chart that shows each component as a part of a top-down tree. Achieved by setting layout 'mode' property to "hierarchy".

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 
chart= new NetChart({
    "navigation": {
        "focusNodeExpansionRadius": 2,
        "initialNodes": [
            "syslog"
        ],
        "mode": "focusnodes"
    },
    "layout": {
        "mode": "hierarchy",
        "nodeSpacing": 45,
        "rowSpacing": 80
    },
    "style": {
        "link": {
            "toDecoration": "arrow"
        }
    },
    "container": "demo",
    "data": [
        {
            "url": "/dvsl/data/extra/bubbles-clean.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
{
    "nodes": [
        {
            "id": "n0",
            "style": {
                "label": "ALL DATA",
                "lineColor": "#2c3e50",
                "fillColor": "#2fc32f"
            },
            "loaded": true
        },
        {
            "id": "win_ev",
            "loaded": true,
            "style": {
                "label": "Windows Events",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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",
                "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
        }
    ]
}
Download Data