Back

Long press event

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