Hierarchy layout of nodes with links and images
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"),
navigation: {
mode: "focusnodes",
focusNodeExpansionRadius: 2,
initialNodes: ["zoomcharts"]
},
style: {
node: {
fillColor: "#E0E0E0",
shadowBlur: 6,
shadowColor: "rgba(0,0,0,0.4)",
shadowOffsetX: 0,
shadowOffsetY: 2,
radius: 20,
display: "image",
imageCropping: true
},
nodeLabel: {
borderRadius: 5,
padding: 5,
textStyle: {
fillColor: "white"
}
},
link: {
fillColor : "#B9B9B9"
},
linkStyleFunction: function(link) {
if (link.data.dataLinkFillColor && link.data.dataLinkLabel) {
link.items = [{
text: link.data.dataLinkLabel,
padding: 5,
borderRadius: 999,
textStyle:{font:"12px Arial", fillColor: "white"},
backgroundStyle: {
fillColor: link.data.dataLinkFillColor,
lineColor: link.data.dataLinkFillColor
}
}];
}
},
nodeStyleFunction: function(node) {
var fillColor = node.data.dataLabelFillColor ? node.data.dataLabelFillColor : "#999999";
node.labelStyle.backgroundStyle.fillColor = fillColor;
},
nodeFocused: {
fillColor: "#E0E0E0"
}
},
data: {
preloaded:
{
nodes: [
{id: "zoomcharts", style: {label: "", radius: 60, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/zoomcharts.png', imageCropping: false}},
{id: "chart_types", style: {label: "CHART\u00A0TYPES", radius: 40, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/chart_types.png', imageCropping: false}},
{id: "concepts", style: {label: "CONCEPTS", radius: 40, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/concepts.png', imageCropping: false}},
{id: "timechart", style: {label: "TIMECHART", radius: 30, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/timechart.png', imageCropping: false}, dataLabelFillColor: "#26A423"},
{id: "timechart1", style: {label: "MIXED\u00A0COLUMNS AND\u00A0AREA", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/timechart1.png'}, dataLabelFillColor: "#26A423", url: "/en/javascript-charts-library/gallery/demo/chart-packages/timechart/columns-and-area"},
{id: "timechart2", style: {label: "THRESHOLD\u00A0LINES", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/timechart2.png'}, dataLabelFillColor: "#26A423", url: '/en/javascript-charts-library/gallery/demo/chart-packages/timechart/time-chart-using-thresholds-to-highlight-extreme-value-changes'},
{id: "timechart3", style: {label: "CANDLESTICKS", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/timechart3.png'}, dataLabelFillColor: "#26A423", url: '/en/javascript-charts-library/gallery/demo/chart-types/candlestick-charts/candlestick-series-type'},
{id: "timechart4", style: {label: "CUSTOM BACKGROUND\u00A0IMAGE", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/timechart4.png'}, dataLabelFillColor: "#26A423", url: '/en/javascript-charts-library/gallery/demo/chart-packages/timechart/area-with-custom-background-image'},
{id: "netchart", style: {label: "NETCHART", radius: 30, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/netchart.png', imageCropping: false}, dataLabelFillColor: "#0094F7"},
{id: "netchart1", style: {label: "INTERACTIVE HIGHLIGHT", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/netchart1.jpg'}, dataLabelFillColor: "#0094F7", url: '/en/javascript-charts-library/gallery/demo/features/filtering/interactive-highlight'},
{id: "netchart2", style: {label: "RADIAL NET LAYOUT", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/netchart2.jpg'}, dataLabelFillColor: "#0094F7", url: '/en/javascript-charts-library/gallery/demo/chart-packages/netchart/radial-net-layout-representing-tree-data'},
{id: "netchart3", style: {label: "INTERACTIVE NODE FILTERING", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/netchart3.jpg'}, dataLabelFillColor: "#0094F7", url: '/en/javascript-charts-library/gallery/demo/features/filtering/interactive-node-filtering'},
{id: "netchart4", style: {label: "CUSTOM THUMBNAILS", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/netchart4.jpg'}, dataLabelFillColor: "#0094F7", url: '/en/javascript-charts-library/gallery/demo/chart-packages/netchart/network-graph-nodes-with-custom-thumbnails'},
{id: "piechart", style: {label: "PIECHART", radius: 30, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/piechart.png', imageCropping: false}, dataLabelFillColor: "#73478C"},
{id: "piechart1", style: {label: "HIERARCHICAL STRUCTURE", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/piechart1.jpg'}, dataLabelFillColor: "#73478C", url: '/en/javascript-charts-library/gallery/demo/chart-packages/piechart/pie-chart-flat-theme-custom-labels'},
{id: "piechart2", style: {label: "CUSTOM BACKGROUND IMAGE", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/piechart2.jpg'}, dataLabelFillColor: "#73478C", url: '/en/javascript-charts-library/gallery/demo/chart-packages/piechart/pie-chart-pie-one-level-3d-theme-no-labels-info-popup'},
{id: "piechart3", style: {label: "LEGEND PLACEMENT", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/piechart3.jpg'}, dataLabelFillColor: "#73478C", url: '/en/javascript-charts-library/gallery/demo/features/legend/legend-placement'},
{id: "piechart4", style: {label: "3D (RAISED) THEME", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/piechart4.jpg'}, dataLabelFillColor: "#73478C", url: '/en/javascript-charts-library/gallery/demo/chart-types/donut-pie-charts/pie-chart-donut-3d-raised-theme-hierarchical'},
{id: "facetchart", style: {label: "FACETCHART", radius: 30, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/facetchart.png', imageCropping: false}, dataLabelFillColor: "#427EBA"},
{id: "facetchart1", style: {label: "WITH LEGEND", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/facetchart1.jpg'}, dataLabelFillColor: "#427EBA", url: '/en/javascript-charts-library/gallery/demo/chart-packages/facetchart/facetchart-legend'},
{id: "facetchart2", style: {label: "CLUSTERED AND STACKED SERIES", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/facetchart2.jpg'}, dataLabelFillColor: "#427EBA", url: '/en/javascript-charts-library/gallery/demo/chart-packages/facetchart/facet-chart-clustered-and-stacked-series-one-level'},
{id: "facetchart3", style: {label: "AGGREGATED SERIES", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/facetchart3.jpg'}, dataLabelFillColor: "#427EBA", url: '/en/javascript-charts-library/gallery/demo/chart-packages/facetchart/facet-chart-drill-down-one-level'},
{id: "facetchart4", style: {label: "WITH AREA FILL, MARKERS, CUSTOM LINE COLORS", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/facetchart4.jpg'}, dataLabelFillColor: "#427EBA", url: '/en/javascript-charts-library/gallery/demo/chart-packages/facetchart/facet-chart-stacked-area-fill-markers-custom-line-colors-custom-line-width-smoothing-one-level'},
{id: "geochart", style: {label: "GEOCHART", radius: 30, fillColor:"#009966", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/geochart.png', imageCropping: false}, dataLabelFillColor: "#E28925"},
{id: "geochart1", style: {label: "AUTO AGGREGATE", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/geochart1.jpg'}, dataLabelFillColor: "#E28925", url: '/en/javascript-charts-library/gallery/demo/chart-packages/geochart/auto-aggregation-and-scaling-by-the-rank-of-the-currently-visible-nodes'},
{id: "geochart2", style: {label: "LAYERS", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/geochart2.jpg'}, dataLabelFillColor: "#E28925", url: '/en/javascript-charts-library/gallery/demo/chart-packages/netchart/twitter-data-shapes-and-nodes'},
{id: "geochart3", style: {label: "PIE CHART ON GEO CHART", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/geochart3.jpg'}, dataLabelFillColor: "#E28925", url: '/en/javascript-charts-library/gallery/demo/chart-packages/piechart/agreggated-pie-charts-on-geo-chart'},
{id: "geochart4", style: {label: "NET CHART ON GEO CHART", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/geochart4.jpg'}, dataLabelFillColor: "#E28925", url: '/en/javascript-charts-library/gallery/demo/chart-packages/netchart/netchart-on-geochart'},
{id: "social", style: {label: "SOCIAL", radius: 30, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/social.png'}},
{id: "social-demo", style: {label: "DEMO", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/demo.png', imageCropping: false}, url: 'https://social.zoomcharts.com/'},
{id: "social-video", style: {label: "VIDEO", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/video.png', imageCropping: false}, url: 'https://www.youtube.com/watch?v=DBtnimCNKHk'},
{id: "cinema_browser", style: {label: "CINEMA\u00A0BROWSER", radius: 30, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/cinema_browser.png'}, dataLabelFillColor: "#FF3300"},
{id: "cinema_browser-demo", style: {label: "DEMO", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/demo.png', imageCropping: false}, url: 'https://imdb.zoomcharts.com/'},
{id: "cinema_browser-video", style: {label: "VIDEO", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/video.png', imageCropping: false}, url: 'https://www.youtube.com/watch?v=rdE6TY08a58'},
{id: "myinstabank", style: {label: "MYINSTABANK", radius: 30, image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/myinstabank.png'}},
{id: "myinstabank-demo", style: {label: "DEMO", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/demo.png', imageCropping: false}, url: 'https://instabank.zoomcharts.com/'},
{id: "myinstabank-video", style: {label: "VIDEO", image: '/dvsl/doc/net-chart/examples/layout/images/hierarchy-advanced/video.png', imageCropping: false}, url: 'https://www.youtube.com/watch?v=60NPt0NKzYU'}
],
links: [
{id: "zoomcharts--chart_types", from: "zoomcharts", to: "chart_types"},
{id: "zoomcharts--concepts", from: "zoomcharts", to: "concepts"},
{id: "chart_types--timechart", from: "chart_types", to: "timechart"},
{id: "chart_types--netchart", from: "chart_types", to: "netchart"},
{id: "chart_types--piechart", from: "chart_types", to: "piechart"},
{id: "chart_types--facetchart", from: "chart_types", to: "facetchart"},
{id: "chart_types--geochart", from: "chart_types", to: "geochart", dataLinkFillColor:"#009966",dataLinkLabel:"NEW!"},
{id: "concepts--social", from: "concepts", to: "social"},
{id: "concepts--cinema_browser", from: "concepts", to: "cinema_browser", dataLinkFillColor:"#FF3300",dataLinkLabel:"HOT!"},
{id: "concepts--myinstabank", from: "concepts", to: "myinstabank"},
{id: "timechart--timechart1", from: "timechart", to: "timechart1"},
{id: "timechart--timechart2", from: "timechart", to: "timechart2"},
{id: "timechart--timechart3", from: "timechart", to: "timechart3"},
{id: "timechart--timechart4", from: "timechart", to: "timechart4"},
{id: "netchart--netchart1", from: "netchart", to: "netchart1"},
{id: "netchart--netchart2", from: "netchart", to: "netchart2"},
{id: "netchart--netchart3", from: "netchart", to: "netchart3"},
{id: "netchart--netchart4", from: "netchart", to: "netchart4"},
{id: "piechart--piechart1", from: "piechart", to: "piechart1"},
{id: "piechart--piechart2", from: "piechart", to: "piechart2"},
{id: "piechart--piechart3", from: "piechart", to: "piechart3"},
{id: "piechart--piechart4", from: "piechart", to: "piechart4"},
{id: "facetchart--facetchart1", from: "facetchart", to: "facetchart1"},
{id: "facetchart--facetchart2", from: "facetchart", to: "facetchart2"},
{id: "facetchart--facetchart3", from: "facetchart", to: "facetchart3"},
{id: "facetchart--facetchart4", from: "facetchart", to: "facetchart4"},
{id: "geochart--geochart1", from: "geochart", to: "geochart1"},
{id: "geochart--geochart2", from: "geochart", to: "geochart2"},
{id: "geochart--geochart3", from: "geochart", to: "geochart3"},
{id: "geochart--geochart4", from: "geochart", to: "geochart4"},
{id: "social--social-demo", from: "social", to: "social-demo"},
{id: "social--social-video", from: "social", to: "social-video"},
{id: "social--cinema_browser-demo", from: "cinema_browser", to: "cinema_browser-demo"},
{id: "social--cinema_browser-video", from: "cinema_browser", to: "cinema_browser-video"},
{id: "social--myinstabank-demo", from: "myinstabank", to: "myinstabank-demo"},
{id: "social--myinstabank-video", from: "myinstabank", to: "myinstabank-video"}
]
}
},
layout: {
mode: "hierarchy",
nodeSpacing: 60, // horizontal spacing between nodes
rowSpacing: 200 // vertical spacing between node rows in the hierarchy layout
},
events:{
onClick: function (event) {
if (event.clickNode && event.clickNode.data.url) {
window.open(event.clickNode.data.url, '_blank');
}
},
onRightClick: function (event) {
event.preventDefault();
}
}
});
Data
Data
//No separate data for this example