Back

Long press event

Network graph example that demonstrates how 'events' object can be used to assign custom functions to event listeners. Here, we assigned 'addData' functions to 'onRightClick' and 'onLongPress'; right clicking a node will spawn a yellow node, but long pressing will spawn a blue node instead. With 'events', you can fully configure each user interaction or other chart events.

Documentation Open in JSFiddle
Start Free Trial Purchase

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