<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>
<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>