Long press event
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
let nodeIdCounter = 0;
function genData(label, color) {
const data = {
nodes:[
{id:"newNode" + nodeIdCounter, loaded:true, style:{label, fillColor: color}},
],
links: [
]
}
if(nodeIdCounter >= 2) {
data.links.push({id:"newLinkA" + nodeIdCounter, from: "newNode" + nodeIdCounter, to: "newNode" + (nodeIdCounter - 1) });
data.links.push({id:"newLinkB" + nodeIdCounter, from: "newNode" + nodeIdCounter, to: "newNode" + (nodeIdCounter - 2) });
} else {
data.links.push({id:"newLinkA" + nodeIdCounter, from: "newNode" + nodeIdCounter, to: "n0"});
}
nodeIdCounter++;
return data;
}
var chart = new ZoomCharts.NetChart({
container: "demo",
navigation: {
mode: "showall"
},
style: {
node: { display: "image" },
link: { fillColor: "rgba(255.0,0.0,0.0,0.5)", fromDecoration: "circle", toDecoration: "arrow" },
nodeLabel: { backgroundStyle: { fillColor: 'orange' } },
shouldDrawOverlappingLabels: false
},
data: {
randomNodes: 20,
randomLinks: 21
},
events: {
onRightClick: (e, args) => {
args.chart.addData(genData("Right Click", "orange"));
},
onLongPress: (e, args) => {
args.chart.addData(genData("Long Press", "blue"));
},
}
});
Data
Data
//No separate data for this example