The drag-node chart allows you to hide connectors below a given strength at client-side using JavaScript. Each of the connectors are set with a strength through XML/JSON or at run time. If you want to hide some of the connectors you need to set the threshold by using the setThreshold()function. The value passed through the function should be more than the strength of the connectors which you want to hide.
In our previous example, we have used the strength attribute to specify the strength of the connectors. The data is show below:
<chart>... <connectors color='FF0000' stdThickness='5'> <connector strength='0.96' label='link label' from='1' to='9' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /> <connector strength='0.8' label='link12' from='1' to='5' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /> <connector strength='0.8' label='link2' from='1' to='8' color='BBBB00' /> <connector strength='0.3' label='link3' from='1' to='4' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /> <connector strength='0.4' label='link4' from='2' to='4' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /> <connector strength='0.6' label='link5' from='4' to='2' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /> <connector strength='0.33' label='link1' from='2' to='8' color='BBBB00'/> <connector strength='0.66' label='link7' from='8' to='3' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /> <connector strength='0.7' label='link6' from='4' to='5' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /> <connector strength='0.6' from='4' to='8' color='FF5904' arrowAtStart='1' arrowAtEnd='1'/> <connector strength='0.6' label='link9' from='5' to='8' color='BBBB00' /> <connector strength='0.5' label='link10' from='7' to='8' color='BBBB00' arrowAtStart='1' arrowAtEnd='1' /> <connector strength='0.3' label='link11' from='7' to='10' color='BBBB00'/> </connectors> ... </chart>
{
"chart":{
},
...
"connectors":[{
"color":"FF0000",
"stdthickness":"5",
"connector":[{
"strength":"0.96",
"label":"link label",
"from":"1",
"to":"9",
"color":"BBBB00",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.8",
"label":"link12",
"from":"1",
"to":"5",
"color":"BBBB00",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.8",
"label":"link2",
"from":"1",
"to":"8",
"color":"BBBB00"
},
{
"strength":"0.3",
"label":"link3",
"from":"1",
"to":"4",
"color":"BBBB00",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.4",
"label":"link4",
"from":"2",
"to":"4",
"color":"BBBB00",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.6",
"label":"link5",
"from":"4",
"to":"2",
"color":"BBBB00",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.33",
"label":"link1",
"from":"2",
"to":"8",
"color":"BBBB00"
},
{
"strength":"0.66",
"label":"link7",
"from":"8",
"to":"3",
"color":"BBBB00",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.7",
"label":"link6",
"from":"4",
"to":"5",
"color":"BBBB00",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.6",
"from":"4",
"to":"8",
"color":"FF5904",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.6",
"label":"link9",
"from":"5",
"to":"8",
"color":"BBBB00"
},
{
"strength":"0.5",
"label":"link10",
"from":"7",
"to":"8",
"color":"BBBB00",
"arrowatstart":"1",
"arrowatend":"1"
},
{
"strength":"0.3",
"label":"link11",
"from":"7",
"to":"10",
"color":"BBBB00"
}
]
}
],
...
}
}
//Get a reference to our chart var ourChart = FusionCharts("NodeChart"); //Update chart to hide connectors with strength less than 0.75 ourChart.setThreshold(0.75);
Once the function is executed the chart will hide all the connectors having strength below 0.75. The chart will look like as under:
