CODEWITHSUNDEEP
javascriptangularjszoomchartsnetchart
Lakhwinder Singh
Lakhwinder Singh

Reputation: 5582

Zoomchart net chart form links issue

I'm using the Zoomchart library's NetChart class to form netchart. But I'm facing issue with links. And not able to find any solution.

Below is the case which I want to achieve:-

Let suppose we have two nodes A and B. Here A is the seller and B is the buyer.

Seller A -> B
Buyer  B -> A

I'm loading data dynamically. And when we initially loading A then we are getting B as Buyer of A. And this forms a link like A -> B. But when B loads its related data then it is getting A as it is buying data from it(A). And this form two link nodes:-

{
    "from": "A",
    "to": "B"
}

{
    "from": "B",
    "to": "A"
}

It is creating a chart like this:-

enter image description here

But it should be a single link. Below is the code:-

this.chartObject = new NetChart({
    container: document.getElementById('sellerBuyersLinkingChart'),
    area: { height: null },
    navigation:{
       focusNodeExpansionRadius: 1,
       initialNodes: ["n-1"],
       mode:"focusnodes"
    },
    data: {
        dataFunction: (nodeList, success, error) => {

            $.ajax({
                url:url+'?nodes='+nodeList.toString(),
                success: (response, textStatus, jqXHR) => {

                    success(response, textStatus, jqXHR);
                },
                error: error
            });
        },
        requestMaxUnits: 1
    },
    style: {
        nodeStyleFunction: (node) => {
        },
        linkStyleFunction: (link) => {
            let type = link.data['extra']['type'];
            if(type == 'sellers') {
                link['fromDecoration'] = "arrow";
                link['fillColor'] = "rgba(47,195,47,0.8)";
                link['direction'] = "L";
            } else {
                link['toDecoration'] = "arrow";
                link['fillColor'] = "rgba(236,46,46,0.8)";
                link['direction'] = "R";
            }

        },
        nodeFocused: {
            fillColor: 'rgba(232,189,43,1)'
        }
    }
});

Expectations: Is there any way that I can send to link id with URL. With that way, I can remove the same node from the link.

This chart should create nodes like this:-

enter image description here

Upvotes: 0

Views: 158

Answers (1)

jancha
jancha

Reputation: 4977

1) You can use multiLinkProcessor to combine multiple links if they are not unique

2) If you add unique id to links, then you can update, remove or manipulate them individually (in fact it's recommended to always add id for links and nodes and that will prevent duplicates). Not having ids will prompt notice in console log as well.

Upvotes: 0

Related Questions