CODEWITHSUNDEEP
javascriptreactjsd3.jshighchartstree
Vitaly Menchikovsky
Vitaly Menchikovsky

Reputation: 8904

d3 and Highcharts diagram with parent and common node

I am looking for some diagram that able to create some simple diagram like this: that left side can be n lines(structure like test + moscow) and all connect to singe point and same for right side can be n lines that starts for single points and structure can be as left side . Also it will be nice to have some menu when click on node. I tried some graph like Highcharts / react-d3-tree but didnt find any way to make its possible

enter image description here

Upvotes: 0

Views: 367

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

To create that type of chart you can use networkgraph series type: https://www.highcharts.com/docs/chart-and-series-types/network-graph

Also, if you have static data, you can build it by using scatter and line series types: 

Highcharts.chart('container', {
    series: [{
        type: 'scatter',
        id: 'mainSeries',
        zIndex: 1,
        marker: {
            radius: 8
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        },
        keys: ['x', 'y', 'name'],
        data: [
            [0, 3, 'test'],
            [1, 3, 'Moscwo'],
            [2, 2, 'Beijing'],
            [1, 1, 'Brussels'],
            [3, 2, 'Bangkok']
        ]
    }, {
        enableMouseTracking: false,
        color: 'blue',
        linkedTo: 'mainSeries',
        zIndex: 0,
        data: [
            [0, 3],
            [1, 3],
            [2, 2],
            [3, 2]
        ]
    }, {
        enableMouseTracking: false,
        color: 'blue',
        linkedTo: 'mainSeries',
        zIndex: 0,
        data: [
            [1, 1],
            [2, 2]
        ]
    }],
    ...
});

Live example: http://jsfiddle.net/BlackLabel/ns9dgy34/

Upvotes: 1

Related Questions