CODEWITHSUNDEEP
javascriptzoomcharts
amulllb
amulllb

Reputation: 3166

zoomcharts 1.5.1 - how to display multiple colors/multiple hover on a single link

I want to know if zoomcharts has the following features in their latest update (1.5.1):

I want one single link between two nodes to be able to be colored with two colors (left-half with red and right-half with black). Also, i want to be able to hover on these two different colored single-split-link differently??

If you just copy paste the following code here, you can see that it can't be done right now...

<script>
    var data = {
        "nodes":[
            {"id":"n1", "loaded":true, "style":{"label":"Node1"}},
            {"id":"n2", "loaded":true, "style":{"label":"Node2"}}
        ],
        "links":[
            {"id":"l1","from":"n1", "to":"n2", "style":{"fillColor":"red", "toDecoration":"arrow"}}
        ]
    };

    var t = new NetChart({
        container: document.getElementById("demo"),
        area: { height: 350 },
        data: { preloaded: data },
        info: {enabled: true, linkContentsFunction: function(data, link, callback) {
          return link.id;
        }}
    });

</script>

Upvotes: 0

Views: 77

Answers (1)

Eizens
Eizens

Reputation: 46

It seems that right now it is not possible to split single link and to hover each of those parts separately.

But here is a "nasty" version how to make something like that using lineDash and fixed node positions.

<script>
        var data = {
            "nodes":[
                {"id":"n1", "loaded":true, x:100, y:0, "style":{"label":"Node1"}},
                {"id":"n2", "loaded":true, x:0, y:0, "style":{"label":"Node2"}}
            ],
            "links":[
                {"id":"l1","from":"n1", "to":"n2", "style":{"fillColor":"red", "toDecoration":"arrow", "length":3}},
                {"id":"l11","from":"n1", "to":"n2", "style":{"fillColor":"black","lineDash":[100,300]}}
            ]
        };

        var t = new NetChart({
            container: document.getElementById("demo"),
            area: { height: 350 },
            data: { preloaded: data },
            info: {enabled: true, linkContentsFunction: function(data, link, callback) {
              return link.id;
            }},
            "style": {
                "multilinkSpacing": 0
            }
        });

    </script>

Upvotes: 0

Related Questions