I'm trying to render a family tree using vis-network, but unsure how to align the arrow for each parents, which also connecting to their child. I've tried a few samples, but the edges looks confusing.
Here's a sample nodes for the grandparents, parents, siblings and child.
var nodes = [
{
id: "0.1",
shape: 'image',
label: 'Minato Uzumaki',
image: 'https://vignette.wikia.nocookie.net/naruto/images/7/71/Minato_Namikaze.png/revision/latest/scale-to-width-down/300?cb=20160125175116',
level: 0
},
{
id: "0.2",
shape: 'image',
label: 'Kushina Uzumaki',
image: 'https://vignette.wikia.nocookie.net/naruto/images/4/4d/Kushina_2.png/revision/latest/scale-to-width-down/300?cb=20150719165408',
level: 0
},
{
id: "0.3",
shape: 'image',
label: 'Naruto Uzumaki',
image: 'https://vignette.wikia.nocookie.net/naruto/images/0/09/Naruto_newshot.png/revision/latest/scale-to-width-down/300?cb=20170621101134',
level: 1
},
{
id: "1.1",
shape: 'image',
label: 'Hiashi Hyūga',
image: 'https://vignette.wikia.nocookie.net/naruto/images/e/ee/Hiashi_Hyuga.png/revision/latest/scale-to-width-down/300?cb=20150109142633',
level: 0
},
{
id: "1.2",
shape: 'image',
label: 'Mother',
image: 'https://vignette.wikia.nocookie.net/naruto/images/0/0a/Hyuuga_mother.png/revision/latest?cb=20150104203212',
level: 0
},
{
id: "1.3",
shape: 'image',
label: 'Hinata Hyūga',
image: 'https://data.whicdn.com/images/191073424/superthumb.jpg?t=1437945312',
level: 1
},
{
id: "1.4",
shape: 'image',
label: 'Hanabi Hyūga',
image: 'https://vignette.wikia.nocookie.net/naruto/images/d/da/Hanabi_Hyuga.png/revision/latest/scale-to-width-down/300?cb=20180314102603',
level: 1
},
{
id: "2.1",
shape: 'image',
label: 'Boruto Uzumaki',
image: 'https://www.anime-planet.com/images/characters/boruto-uzumaki-71171.jpg',
level: 2
},
{
id: "2.2",
shape: 'image',
label: 'Himawari Uzumaki',
image: 'https://vignette.wikia.nocookie.net/naruto/images/2/26/Himawari.png/revision/latest?cb=20171115100745',
level: 2
},
];
var edges = [
{from: "0.1", to: "0.2"},
{from: "0.3", to: "0.1"},
{from: "0.3", to: "0.2"},
{from: "1.1", to: "1.2"},
{from: "1.3", to: "1.1"},
{from: "1.3", to: "1.2"},
{from: "1.4", to: "1.1"},
{from: "1.4", to: "1.2"},
{from: "1.4", to: "1.3"},
{from: "0.3", to: "1.3"},
{from: "2.1", to: "2.2"},
{from: "0.3", to: "2.1"},
{from: "0.3", to: "2.2"},
{from: "1.3", to: "2.1"},
{from: "1.3", to: "2.2"},
];
var data = {
nodes: nodes2,
edges: edges2
};
var container = document.getElementById('network');
var options = {
nodes: {
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color: {
border: 'lightgray',
background: 'white',
highlight: {
border: 'lightgray',
background: 'lightblue'
},
hover: {
border: 'lightgray',
background: 'lightblue'
}
}
},
edges: {
color: 'lightgray',
smooth: {
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 1
}
},
layout: {
hierarchical: {
direction: 'UD',
nodeSpacing: 150
}
},
interaction: {dragNodes :false},
physics:true,
};
var network = new vis.Network(container, data, options);
I expect the output will be something like below
Is it possible to render something like that with vis-network? Or is there a related library able to render like above?
I can offer you to add some extra nodes in between the main nodes.
those will be defined as relation nodes.
the red nodes will define as a couple, and the blue nodes will be defined as a descendant.
both blue and red could be hidden.
Good luck!
Related
I started exploring highcharts. Created report with organization hierarchy with drilldown.
Unable to format the links in drilldown report, they look like triangles instead of straight lines like in the main org chart and getting messy when the hierarchy in the drilldown gets multiple nodes.
In below example, click on Div.2, see the drilldown links. What chart options do we have to control these triagle svg shapes other than linkLineWidth etc..
Links with Triangle Shape
jsfiddle Test Case
Highcharts.chart('container', {
chart: {
height: 600,
width: 600,
inverted: true,
type: 'organization'
},
title: {
text: 'Highcharts Org Chart'
},
series: [{
name: 'Highsoft',
data: [{
from: "CO",
to: "DIV01",
},
{
from: 'CO',
to: 'DIV02'
}
],
nodes: [{
id: 'DIV01',
title: 'Div Hd 1',
name: 'Div. 1',
drilldown: "DIV01"
},
{
id: 'DIV02',
title: 'Div Hd 2',
name: 'Div. 2',
drilldown: 'DIV02'
}
]
}],
drilldown: {
activeDataLabelStyle: {
color: 'contrast'
},
layout: 'hanging',
series: [{
id: "DIV01",
name: "DIV01",
keys: ['from', 'to'],
data: [
['DIV01', 'DEP01']
],
nodes: [{
id: 'DEP01',
title: 'Dept Hd 1',
name: 'Dept. 1'
}]
},
{
id: "DIV02",
name: "DIV02",
keys: ['from', 'to'],
data: [
['DIV02', 'DEP02'],
['DEP02', 'DEP03'],
['DEP02', 'DEP04'],
['DEP04', 'DEP05'],
['DEP04', 'DEP06'] ,
['DEP04', 'DEP08'] ,
['DEP06', 'DEP07']
],
nodes: [{
id: 'DEP02'
}]
}
]
}
});
It's a bug, more information you will find in Github issue, workaround you can change patch color via CSS fill: none.
.highcharts-series path {
fill: none;
}
demo: https://jsfiddle.net/BlackLabel/ay1czgxp/
I am trying to set up a simple org chart with Highcharts to display our association board and functions.Below the president, there are 4 level 1 items, then there are 3 folks at level 2 and I would like to add another 5 folks also at level 2 but all this would not fit given the chart width, so I would like to extend the level 2 line so that these 5 level 2 folks get displayed below, pretty much like a level 3...just like this
I believe that this is easy but just couldn't figure it out...
Thanks for helping out
Philippe
Try to manipulate properties offsetHorizontal and offsetVertical.
series: [{
type: 'organization',
name: 'Digital Transformation',
keys: ['from', 'to'],
data: [
['CEO', 'Department1'],
['CEO', 'Department2'],
['CEO', 'Department3'],
['CEO', 'Department4'],
['CEO', 'Department5'],
['CEO', 'Department4x'],
],
levels: [{
level: 0,
color: 'silver',
dataLabels: {
color: 'white'
},
height: 25
}, {
level: 1,
color: 'silver',
dataLabels: {
color: 'black'
},
height: 25
}, {
level: 2,
color: 'green',
dataLabels: {
color: 'black'
},
height: 25
}],
nodes: [{
id: '',
title: 'CEO',
name: null,
color: "#000000",
info: "CEO"
}, {
className: 'title',
id: 'Department1',
title: 'Department1',
name: '',
layout: 'hanging',
}, {
id: 'Department2',
title: 'Department2',
name: '',
layout: 'hanging',
}, {
id: 'Department3',
title: 'Department3',
name: '',
layout: 'hanging',
}, {
id: 'Department4',
title: 'Department4',
name: '',
layout: 'hanging',
}, {
id: 'Department5',
title: 'Department5',
name: '',
layout: 'hanging',
level: 1,
offsetHorizontal: 15,
offsetVertical: 0,
}, {
id: 'Department4x',
title: 'Department4x',
name: '',
layout: 'hanging',
level: 2
}],
}],
Live demo:
https://jsfiddle.net/BlackLabel/0tk6n94L/
API References:
https://api.highcharts.com/highcharts/series.organization.nodes.offsetHorizontal
https://api.highcharts.com/highcharts/series.organization.nodes.offsetVertical
I'm working on Treemap combined with Heatmap (to get the colorAxis feature) and multi-levels (to drill in the data).
It works fine, can see here the sample result http://jsfiddle.net/vegaelce/q5n4bur3.
colorAxis: {
minColor: "#ffffff",
maxColor: "#0000ff"
},
series: [{
type: "treemap",
layoutAlgorithm: 'sliceAndDice',
allowDrillToNode: true,
alternateStartingDirection: true,
levelIsConstant: false,
dataLabels: {
enabled: false
},
levels: [{
level: 1,
dataLabels: {
enabled: true,
},
borderWidth: 3
},{
level: 2,
borderWidth: 2
},{
level: 3,
borderWidth: 1
}],
data: [
{ name:'Accessories',
id:'Accessories',
value: 6297610.2,
colorValue: 6297610.2,
},
{ name:'Dresses',
value: 1587737.4,
colorValue: 1587737.4,
},
{ name:'City Trousers',
value: 171824.3,
colorValue: 171824.3,
},
{ name:'City Skirts',
value: 171570.4,
colorValue: 171570.4,
},
{
name: '2014', id: 'Accessories_2014', value: 3499307.1, parent: 'Accessories',colorValue: 3499307
},{
name: '2015',value: 1926600.4, parent: 'Accessories',colorValue: 1926600
},{
name: '2016',value: 871702.7, parent: 'Accessories',colorValue: 871702
},
{
name: 'Q1', id: 'Accessories_2014_Q1', value: 6297610.1, parent: 'Accessories_2014',colorValue: 6297610
},
{
name: 'Q2', id: 'Accessories_2014_Q2', value: 171824.1, parent: 'Accessories_2014',colorValue: 171824
},
{
name: 'Q3', id: 'Accessories_2014_Q3', value: 109307.1, parent: 'Accessories_2014',colorValue: 109307
}
]
}]
What I need, to clarify the reading of this kind of chart, is to display on a given level, only one color for each group-node (not the colors of the children values).
For example, in my dataset, I'd like on the first level, see one color for the "Accessories" group (the dark blue we can see when hover the group with the mouse).
When we click on "Accessories", then we can see only one color for "2014"...
Is it possible and if yes, how can I do that ?
Thanks in advance
Take a look at this demo: http://jsfiddle.net/BlackLabel/841Lxsuj/ I used the render callback to update the colorAxis colors after the drilldown event has been triggered.
events: {
render() {
let chart = this;
if (chartForRender) {
chartForRender = false;
if (chart.series[0].drillUpButton) {
chart.update({
colorAxis: {
minColor: "red",
maxColor: "orange"
}
})
} else {
chart.update({
colorAxis: {
minColor: "#ffffff",
maxColor: "#0000ff"
}
})
}
}
chartForRender = true;
}
}
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.Chart#update
while using Highcharts multi level treemap I ran into data labels overflow issue. Data labels overflows to other area. This works fine at level 1 & 2 when I use option overflow: 'crop' but does not work at level 3. Any idea where it is going wrong.
Here in example area with name:F data label overflows but data label with name:C at level 2 does not overflow.
Here is fiddle example.
$(function() {
var H = Highcharts;
$('#container').highcharts({
chart: {
type: 'treemap',
width: 500
},
title: {
text: null
},
plotOptions: {
series: {
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top'
}
}, {
level: 2,
dataLabels: {
formatter: function () {
return this.point.realValue;
},
overflow: 'crop'
}
}, {
level: 3,
dataLabels: {
formatter: function () {
return this.point.realValue;
},
overflow: 'crop'
}
}]
}
},
series: [{
data: [{
name: 'A',
id: 'A',
value: 1,
color: '#FFFFFF'
}, {
name: 'B',
id: 'B',
value: 1,
color: '#FFFFFF'
}, {
name: 'C',
parent: 'A',
id: 'A-1',
value: 10,
realValue: 'thisisveryveryveryveryveryverylongteststring',
color: '#ECEA8E'
}, {
name: 'D',
parent: 'A',
id: 'A-2',
color: '#FFFFFF'
}, {
name: 'E',
parent: 'A-2',
id: 'A-2-1',
value: 10,
realValue: 'A',
color: '#599753'
}, {
name: 'F',
parent: 'A-2',
id: 'A-2-2',
value: 10,
realValue: 'thisisveryveryveryverylongteststring',
color: '#1B3C40'
}, {
name: 'G',
parent: 'B',
id: 'B-1',
value: 10,
realValue: 'A',
color: '#ECEA8E'
}, {
name: 'H',
parent: 'B',
id: 'B-2',
color: '#FFFFFF'
}, {
name: 'I',
parent: 'B-2',
id: 'B-2-1',
value: 10,
realValue: 'A',
color: '#599753'
}, {
name: 'J',
parent: 'B-2',
id: 'B-2-2',
value: 10,
realValue: 'A',
color: '#1B3C40'
}]
}]
});
});
Unfortunately, Highcharts doesn't hide labels when they don't fit treemap point area. As a workaround, you can loop through each data point and check if label related to it is wider. If it is wider just hide it.
Code:
chart: {
type: 'treemap',
width: 500,
events: {
load: function() {
var chart = this,
series = chart.series[0],
pointWidth,
labelWidth;
series.data.forEach(function(point) {
if (point.dataLabel) {
pointWidth = point.shapeArgs.width;
labelWidth = point.dataLabel.width;
if (labelWidth > pointWidth) {
point.dataLabel.hide();
}
}
});
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/h65xm4qb/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
I am using Highcharts Treemap and I want to prevent from showing the next level in every level of the treemap.
I want that every object on the treemap will be with only one color.
Here is my code:
Highcharts.chart('myChart', {
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5,
},
colorAxis: {
minColor: '#ffcfab',
maxColor: '#ff5e43' //'#FF5E43',
},
legend: {
enabled: false
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: result
}],
title: {
text: 'All Data Sources',
margin: 1,
style: {
font: 'Roboto Condensed,sans-serif',
fontSize: '24px',
fontFamily: 'Roboto Condensed',
fontWeight: 700,
display: 'block',
}
}
})
Thanks In Advance.
Setting opacity to 0 for the series seems to be fixing your problem.
Demo: http://jsfiddle.net/qa2czu8y/
$(function() {
Highcharts.chart('container', {
title: {
text: 'All Data Sources',
margin: 1,
style: {
font: 'Roboto Condensed,sans-serif',
fontSize: '24px',
fontFamily: 'Roboto Condensed',
fontWeight: 700,
display: 'block',
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3,
}],
opacity: 0,
data: [{
id: 'A',
name: 'Apples'
}, {
id: 'B',
name: 'Bananas'
}, {
id: 'O',
name: 'Oranges'
}, {
name: 'Anne',
parent: 'A',
value: 5,
colorValue: 5
}, {
name: 'Rick',
parent: 'A',
value: 3,
colorValue: 3
}, {
name: 'Peter',
parent: 'A',
value: 4,
colorValue: 4
}, {
name: 'Anne',
parent: 'B',
value: 4,
colorValue: 4
}, {
name: 'Rick',
parent: 'B',
value: 10,
colorValue: 10
}, {
name: 'Peter',
parent: 'B',
value: 1,
colorValue: 1
}, {
name: 'Anne',
parent: 'O',
value: 1,
colorValue: 1
}, {
name: 'Rick',
parent: 'O',
value: 3,
colorValue: 3
}, {
name: 'Peter',
parent: 'O',
value: 3,
colorValue: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
colorValue: 2
}]
}],
tooltip: {
backgroundColor: 'black',
style: {
"color": "white",
"font": "Roboto"
},
borderColor: 'black',
borderRadius: 5
},
colorAxis: {
minColor: '#ffcfab',
maxColor: '#ff5e43' //'#FF5E43',
},
legend: {
enabled: false
},
});
});
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>