Lang Tree Code
<div id="coses">Projecte</div>
<figure class="highcharts-figure">
<div id="container"></div></figure>
<script type="text/javascript">
// Add the nodes option through an event call. We want to start with the parent
// item and apply separate colors to each child element, then the same color to
// grandchildren.
Highcharts.addEvent(
Highcharts.Series,
'afterSetOptions',
function (e) {
const colors = Highcharts.getOptions().colors,
nodes = {};
let i = 0;
if (
this instanceof Highcharts.Series.types.networkgraph &&
e.options.id === 'lang-tree'
) {
e.options.data.forEach(function (link) {
if (link[0] === 'Proto Indo-European') {
nodes['Proto Indo-European'] = {
id: 'Proto Indo-European',
marker: {
radius: 20
}
};
nodes[link[1]] = {
id: link[1],
marker: {
radius: 10
},
color: colors[i++]
};
} else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1],
color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function (id) {
return nodes[id];
});
}
}
);
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
height: '100%'
},
title: {
text: 'My Network',
align: 'left'
},
subtitle: {
text: 'Highcharts into Wordpress',
align: 'left'
},
// llegenda vertical -------
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333'
}
}
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: true,
friction: -0.9
}
}
},
series: [{
accessibility: {
enabled: false
},
dataLabels: {
enabled: true,
linkFormat: '',
style: {
fontSize: '0.8em',
fontWeight: 'normal'
}
},
id: 'lang-tree',
data: [
['Proto Indo-European', 'Balto-Slavic'],
['Proto Indo-European', 'Germanic'],
['Proto Indo-European', 'Celtic'],
['Proto Indo-European', 'Italic'],
['Proto Indo-European', 'Hellenic'],
['Proto Indo-European', 'Anatolian'],
['Proto Indo-European', 'Indo-Iranian'],
['Proto Indo-European', 'Tocharian'],
['Indo-Iranian', 'Dardic'],
['Indo-Iranian', 'Indic'],
['Indo-Iranian', 'Iranian'],
['Iranian', 'Old Persian'],
['Old Persian', 'Middle Persian'],
['Indic', 'Sanskrit'],
['Italic', 'Osco-Umbrian'],
['Italic', 'Latino-Faliscan'],
['Latino-Faliscan', 'Latin'],
['Celtic', 'Brythonic'],
['Celtic', 'Goidelic'],
['Germanic', 'North Germanic'],
['Germanic', 'West Germanic'],
['Germanic', 'East Germanic'],
['North Germanic', 'Old Norse'],
['North Germanic', 'Old Swedish'],
['North Germanic', 'Old Danish'],
['West Germanic', 'Old English'],
['West Germanic', 'Old Frisian'],
['West Germanic', 'Old Dutch'],
['West Germanic', 'Old Low German'],
['West Germanic', 'Old High German'],
['Old Norse', 'Old Icelandic'],
['Old Norse', 'Old Norwegian'],
['Old Norwegian', 'Middle Norwegian'],
['Old Swedish', 'Middle Swedish'],
['Old Danish', 'Middle Danish'],
['Old English', 'Middle English'],
['Old Dutch', 'Middle Dutch'],
['Old Low German', 'Middle Low German'],
['Old High German', 'Middle High German'],
['Balto-Slavic', 'Baltic'],
['Balto-Slavic', 'Slavic'],
['Slavic', 'East Slavic'],
['Slavic', 'West Slavic'],
['Slavic', 'South Slavic'],
// Leaves:
['Proto Indo-European', 'Phrygian'],
['Proto Indo-European', 'Armenian'],
['Proto Indo-European', 'Albanian'],
['Proto Indo-European', 'Thracian'],
['Tocharian', 'Tocharian A'],
['Tocharian', 'Tocharian B'],
['Anatolian', 'Hittite'],
['Anatolian', 'Palaic'],
['Anatolian', 'Luwic'],
['Anatolian', 'Lydian'],
['Iranian', 'Balochi'],
['Iranian', 'Kurdish'],
['Iranian', 'Pashto'],
['Iranian', 'Sogdian'],
['Old Persian', 'Pahlavi'],
['Middle Persian', 'Persian'],
['Hellenic', 'Greek'],
['Dardic', 'Dard'],
['Sanskrit', 'Sindhi'],
['Sanskrit', 'Romani'],
['Sanskrit', 'Urdu'],
['Sanskrit', 'Hindi'],
['Sanskrit', 'Bihari'],
['Romanian', 'Catalan'],
['Romanian', 'Bihari'],
['Persian', 'Slovene'],
['Norwegian', 'Ukrainian'],
['Yiddish', 'Scottish Gaelic'],
['Cornish', 'Oscan'],
['English', 'Danish'],
['Catalan', 'Sabadellenc'],
['Catalan', 'Gironí'],
['Catalan', 'Pixapins'],
['Sanskrit', 'Assamese'],
['Sanskrit', 'Bengali'],
['Sanskrit', 'Marathi'],
['Sanskrit', 'Gujarati'],
['Sanskrit', 'Punjabi'],
['Sanskrit', 'Sinhalese'],
['Osco-Umbrian', 'Umbrian'],
['Osco-Umbrian', 'Oscan'],
['Latino-Faliscan', 'Faliscan'],
['Latin', 'Portugese'],
['Latin', 'Spanish'],
['Latin', 'French'],
['Latin', 'Romanian'],
['Latin', 'Italian'],
['Latin', 'Catalan'],
['Latin', 'Franco-Provençal'],
['Latin', 'Rhaeto-Romance'],
['Brythonic', 'Welsh'],
['Brythonic', 'Breton'],
['Brythonic', 'Cornish'],
['Brythonic', 'Cuymbric'],
['Goidelic', 'Modern Irish'],
['Goidelic', 'Scottish Gaelic'],
['Goidelic', 'Manx'],
['East Germanic', 'Gothic'],
['Middle Low German', 'Low German'],
['Middle High German', '(High) German'],
['Middle High German', 'Yiddish'],
['Middle English', 'English'],
['Middle Dutch', 'Hollandic'],
['Middle Dutch', 'Flemish'],
['Middle Dutch', 'Dutch'],
['Middle Dutch', 'Limburgish'],
['Middle Dutch', 'Brabantian'],
['Middle Dutch', 'Rhinelandic'],
['Old Frisian', 'Frisian'],
['Middle Danish', 'Danish'],
['Middle Swedish', 'Swedish'],
['Middle Norwegian', 'Norwegian'],
['Old Norse', 'Faroese'],
['Old Icelandic', 'Icelandic'],
['Baltic', 'Old Prussian'],
['Baltic', 'Lithuanian'],
['Baltic', 'Latvian'],
['West Slavic', 'Polish'],
['West Slavic', 'Slovak'],
['West Slavic', 'Czech'],
['West Slavic', 'Wendish'],
['East Slavic', 'Bulgarian'],
['East Slavic', 'Old Church Slavonic'],
['East Slavic', 'Macedonian'],
['East Slavic', 'Serbo-Croatian'],
['East Slavic', 'Slovene'],
['South Slavic', 'Russian'],
['South Slavic', 'Ukrainian'],
['South Slavic', 'Belarusian'],
['South Slavic', 'Rusyn'],
// SUELTUS
['ANDROID', 'IOS'],
['ANDROID', 'LINUX']
]
, showInLegend: true
}]
});
</script>
Lang Tree 3 series
<figure class="highcharts-figure">
<div id="container3"></div></figure>
<script type="text/javascript">
Highcharts.addEvent(
Highcharts.Series,
'afterSetOptions',
function (e) {
const colors = Highcharts.getOptions().colors,
nodes = {};
let i = 0;
if (
this instanceof Highcharts.Series.types.networkgraph &&
e.options.id === 'lang-tree'
) {
e.options.data.forEach(function (link) {
if (link[0] === 'Proto Indo-European') {
nodes['Proto Indo-European'] = {
id: 'Proto Indo-European',
marker: {
radius: 20
}
};
nodes[link[1]] = {
id: link[1],
marker: {
radius: 10
},
color: colors[i++]
};
} else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1],
color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function (id) {
return nodes[id];
});
}
if (
this instanceof Highcharts.Series.types.networkgraph &&
e.options.id === 'lang-tree2'
) {
e.options.data.forEach(function (link) {
if (link[0] === 'Proto Indo-European') {
nodes['Proto Indo-European'] = {
id: 'Proto Indo-European',
marker: {
radius: 20
}
};
nodes[link[1]] = {
id: link[1],
marker: {
radius: 10
},
color: colors[i++]
};
} else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1],
color: nodes[link[0]].color
};
}
});
e.options.nodes = Object.keys(nodes).map(function (id) {
return nodes[id];
});
}
}
);
Highcharts.chart('container3', {
chart: {
type: 'networkgraph',
height: '100%',
// no va en aquest tipus de type ?
zoomType: 'xy'
},
title: {
text: 'Languages Tree splitted into 3 Series',
align: 'left'
},
subtitle: {
text: '6 degrees',
align: 'left'
},
// llegenda vertical -------
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333'
}
}
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: true,
friction: -0.95
}
}
},
series: [
// 1
{
//data 1
dataLabels: {
enabled: true,
linkFormat: '',
style: {
fontSize: '0.8em',
fontWeight: 'normal'
}
},id: 'lang-tree',
data: [
['Proto Indo-European', 'Balto-Slavic'], ['Balto-Slavic', 'Persian'], ['Persian', 'Spanish'] ,
['Proto Indo-European', 'Germanic'], ['Germanic', 'Cornish'],['Cornish', 'Oscan'],
['Proto Indo-European', 'Celtic'], ['Celtic', 'English'],['English', 'Danish'],
['Proto Indo-European', 'Italic'], ['Italic', 'Catalan'],['Catalan', 'Sabadellenc'],['Catalan', 'Gironí'],['Catalan', 'Pixapins'],
['Proto Indo-European', 'Hellenic'],['Hellenic', 'Lydian'],['Lydian', 'Romanian'],
// orphaned
['Orphaned Net', 'Dogs'],
['Orphaned Net', 'Cats'],
['Orphaned Net', 'Birds']
]
, showInLegend: true
// fi data 1
},
{
//data 2
dataLabels: {
enabled: true,
linkFormat: '',
style: {
fontSize: '0.8em',
fontWeight: 'normal'
}
},id: 'lang-tree2',
data: [
['Proto Indo-European', 'Anatolian'],['Anatolian', 'Scottish Gaelic'],[ 'Scottish Gaelic', 'Yiddish'],
['Proto Indo-European', 'Indo-Iranian'],['Indo-Iranian', 'Norwegian'],['Norwegian', 'Ukrainian'],
['Proto Indo-European', 'Tocharian'],['Tocharian', 'Slovene'],['Slovene', 'Chinese'],['Chinese', 'Spanish']
]
, showInLegend: true
// fi data 2
},
{
//data 3
dataLabels: {
enabled: true,
linkFormat: '',
style: {
fontSize: '0.8em',
fontWeight: 'normal'
}
},id: 'lang-tree2',
data: [
['Proto Indo-European', 'Japanese'],
['Proto Indo-European', 'Anatolian'],['Anatolian', 'Scottish Gaelic'],[ 'Scottish Gaelic', 'Yiddish'],
['Proto Indo-European', 'Indo-Iranian'],['Indo-Iranian', 'Norwegian'],['Norwegian', 'Ukrainian'],
['Proto Indo-European', 'Tocharian'],['Tocharian', 'Slovene'],['Slovene', 'Chinese'],['Chinese', 'Spanish']
]
, showInLegend: true
// fi data 3
},
// fi series
]
});
</script>