Back

Custom popup on click

Click on a node will display custom HTML popup that is not part of NetChart.

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>

    <div id="popup">
        <h2>My custom popup</h2>
    </div>

CSS

CSS
#popup {
		position:absolute;
		display:none;
		z-index:99;
		background-color: rgba(255,255,255,0.9);
		min-width: 100px;
		min-height: 50px;
		padding:20px;
		border:1px solid #1888ad;
	}

JavaScript

JavaScript


	var sliceColors = [
		"rgba(111,82,184,1)",
		"rgba(255,214,24,1)",
		"rgba(47,195,47,1)",
		"rgba(86,185,247,1)", 
		"rgba(234,180,4,1)",
		"rgba(222,103,44,1)"
	];

	// Used to determine if popup needs to be displayed.
	var nodeIdForPopup = "m-1";

	var randomSeed = 10; // this can be changed to generate different data sets
	function getRandomNumber() {
		var x = Math.sin(randomSeed++) * 10000;
		return x - Math.floor(x);
	}

	var t = new NetChart({
		container: document.getElementById("demo"),
		area: { height: null },
		data: { url: "/dvsl/data/net-chart/friend-net.json" },
		navigation:{initialNodes:["m-1"], mode:"focusnodes"},
		style:{
			nodeStyleFunction: nodeStyle,
			linkStyleFunction: linkStyle
		},
		events: {
			onClick: function(e, args) {
				if(args.clickNode) {
					nodeIdForPopup = args.clickNode;
				} else {
					nodeIdForPopup = null;
				}
				update(e);
			},
			onPositionChange: update,
			onPointerDrag: update,
			onChartUpdate: update,
			onSettingsChange: update
		}
	});

	function nodeStyle(node){
		if(!node.data.fillColor) {
			var color = sliceColors[Math.floor(Math.random()*sliceColors.length)];

			node.fillColor = node.data.fillColor = color; 
			node.lineColor = node.data.lineColor =color.replace(",1)",",0.5)"); 
			node.lineWidth = node.data.lineWidth = 8;
		} else {
			node.fillColor = node.data.fillColor;
			node.lineColor = node.data.lineColor;
			node.lineWidth = node.data.lineWidth;
		}
	}

	function linkStyle(link){
		link.radius = 3;
		link.fillColor = ["#de672c", "#b0dc0b", "#eab404", "#ccc"][Math.floor(getRandomNumber()* 4)];
	}


	//initial popup update:
	setTimeout(function() {
		update();
	},300)

	function update(e) {
		var popup = document.getElementById("popup");
		if(!nodeIdForPopup) {
			if(!(popup.offsetWidth === 0 && popup.offsetHeight === 0)) {
				popup.style.display = "none";
			}
			return;
		}
		//get latest node clicked/dragged or initial one
		var nodeId = nodeIdForPopup;

		/*
		//if other node clicked/dragged:
		if(e && e.clickNode) {
			nodeId = e.clickNode.id;
			//update nodeId to the latest node clicked/dragged
			nodeIdForPopup = nodeId;
		}*/

			var dimensions = t.getNodeDimensions(nodeId);
		if(!dimensions || !nodeId) {
			return;
		}

		var container = document.getElementById("demo");
		var off_top = container.offsetTop;
		var off_left = container.offsetLeft;

		//updte popup position and show it if it's hidden.
		popup.style.top = off_top + dimensions.y + "px";
		popup.style.left = off_left + dimensions.x + "px";
		popup.style.display = "block";
	}

Data

Data
{
    "nodes": [
        {
            "id": "m-1",
            "age": 20,
            "name": "Joe",
            "loaded": true
        },
        {
            "id": "m-2",
            "age": 15,
            "name": "Fred",
            "loaded": true
        },
        {
            "id": "m-3",
            "age": 16,
            "name": "Tom",
            "loaded": true
        },
        {
            "id": "m-4",
            "age": 35,
            "name": "Robert",
            "loaded": true
        },
        {
            "id": "m-5",
            "age": 38,
            "name": "Mark",
            "loaded": true
        },
        {
            "id": "m-6",
            "age": 42,
            "name": "Jason",
            "loaded": true
        },
        {
            "id": "m-7",
            "age": 37,
            "name": "Bill",
            "loaded": true
        },
        {
            "id": "m-8",
            "age": 60,
            "name": "Andre",
            "loaded": true
        },
        {
            "id": "m-9",
            "age": 63,
            "name": "Daniel",
            "loaded": true
        },
        {
            "id": "m-10",
            "age": 17,
            "name": "Thomas",
            "loaded": true
        },
        {
            "id": "m-11",
            "age": 21,
            "name": "Sergejs",
            "loaded": true
        },
        {
            "id": "m-12",
            "age": 26,
            "name": "Bryon",
            "loaded": true
        },
        {
            "id": "m-13",
            "age": 29,
            "name": "Toby",
            "loaded": true
        },
        {
            "id": "f-1",
            "age": 28,
            "name": "Anna",
            "loaded": true
        },
        {
            "id": "f-2",
            "age": 21,
            "name": "Wendy",
            "loaded": true
        },
        {
            "id": "f-3",
            "age": 17,
            "name": "Dina",
            "loaded": true
        },
        {
            "id": "f-4",
            "age": 26,
            "name": "Cate",
            "loaded": true
        },
        {
            "id": "f-5",
            "age": 31,
            "name": "Elisa",
            "loaded": true
        },
        {
            "id": "f-6",
            "age": 34,
            "name": "Suzie",
            "loaded": true
        },
        {
            "id": "f-7",
            "age": 26,
            "name": "Trixie",
            "loaded": true
        },
        {
            "id": "f-8",
            "age": 37,
            "name": "Emily",
            "loaded": true
        },
        {
            "id": "f-9",
            "age": 39,
            "name": "Alice",
            "loaded": true
        },
        {
            "id": "f-10",
            "age": 42,
            "name": "Violet",
            "loaded": true
        },
        {
            "id": "f-11",
            "age": 32,
            "name": "Sara",
            "loaded": true
        },
        {
            "id": "f-12",
            "age": 28,
            "name": "Julia",
            "loaded": true
        },
        {
            "id": "f-13",
            "age": 19,
            "name": "Ramona",
            "loaded": true
        },
        {
            "id": "f-14",
            "age": 20,
            "name": "Flavia",
            "loaded": true
        },
        {
            "id": "f-15",
            "age": 23,
            "name": "Liga",
            "loaded": true
        },
        {
            "id": "f-16",
            "age": 27,
            "name": "Jessica",
            "loaded": true
        },
        {
            "id": "f-17",
            "age": 40,
            "name": "Barbara",
            "loaded": true
        },
        {
            "id": "f-18",
            "age": 45,
            "name": "Hanna",
            "loaded": true
        },
        {
            "id": "f-19",
            "age": 53,
            "name": "Giselle",
            "loaded": true
        },
        {
            "id": "f-20",
            "age": 27,
            "name": "Mia",
            "loaded": true
        },
        {
            "id": "f-21",
            "age": 19,
            "name": "Rose",
            "loaded": true
        },
        {
            "id": "f-23",
            "age": 28,
            "name": "Judy",
            "loaded": true
        },
        {
            "id": "f-22",
            "age": 32,
            "name": "Nikola",
            "loaded": true
        },
        {
            "id": "f-24",
            "age": 34,
            "name": "Sofia",
            "loaded": true
        },
        {
            "id": "f-25",
            "age": 37,
            "name": "Fatima",
            "loaded": true
        },
        {
            "id": "f-26",
            "age": 44,
            "name": "Samantha",
            "loaded": true
        },
        {
            "id": "f-27",
            "age": 23,
            "name": "Chelia",
            "loaded": true
        },
        {
            "id": "f-28",
            "age": 18,
            "name": "Alexa",
            "loaded": true
        },
        {
            "id": "f-29",
            "age": 21,
            "name": "Karla",
            "loaded": true
        },
        {
            "id": "f-30",
            "age": 23,
            "name": "Karina",
            "loaded": true
        },
        {
            "id": "f-31",
            "age": 51,
            "name": "Patricia",
            "loaded": true
        },
        {
            "id": "f-32",
            "age": 47,
            "name": "Anna",
            "loaded": true
        },
        {
            "id": "f-33",
            "age": 38,
            "name": "Laura",
            "loaded": true
        }
    ],
    "links": [
        {
            "id": "l01",
            "from": "m-1",
            "to": "f-1",
            "type": "friend"
        },
        {
            "id": "l02",
            "from": "m-1",
            "to": "f-2",
            "type": "friend"
        },
        {
            "id": "l03",
            "from": "m-1",
            "to": "f-3",
            "type": "friend"
        },
        {
            "id": "l04",
            "from": "m-1",
            "to": "f-4",
            "type": "friend"
        },
        {
            "id": "l06",
            "from": "m-1",
            "to": "f-6",
            "type": "friend"
        },
        {
            "id": "l07",
            "from": "m-2",
            "to": "f-2",
            "type": "collegue"
        },
        {
            "id": "l12",
            "from": "m-3",
            "to": "f-10",
            "type": "spouse"
        },
        {
            "id": "l13",
            "from": "m-3",
            "to": "f-5",
            "type": "enemy"
        },
        {
            "id": "l14",
            "from": "m-3",
            "to": "f-8",
            "type": "friend"
        },
        {
            "id": "l15",
            "from": "m-3",
            "to": "f-4",
            "type": "friend"
        },
        {
            "id": "l16",
            "from": "m-3",
            "to": "f-9",
            "type": "friend"
        },
        {
            "id": "l17",
            "from": "m-4",
            "to": "f-15",
            "type": "spouse"
        },
        {
            "id": "l18",
            "from": "m-4",
            "to": "f-14",
            "type": "collegue"
        },
        {
            "id": "l22",
            "from": "m-5",
            "to": "f-15",
            "type": "collegue"
        },
        {
            "id": "l23",
            "from": "m-5",
            "to": "f-4",
            "type": "collegue"
        },
        {
            "id": "l27",
            "from": "f-11",
            "to": "f-15",
            "type": "collegue"
        },
        {
            "id": "l28",
            "from": "m-5",
            "to": "m-6",
            "type": "friend"
        },
        {
            "id": "l29",
            "from": "m-6",
            "to": "m-7",
            "type": "friend"
        },
        {
            "id": "l30",
            "from": "m-7",
            "to": "m-8",
            "type": "friend"
        },
        {
            "id": "l31",
            "from": "m-8",
            "to": "m-9",
            "type": "friend"
        },
        {
            "id": "l32",
            "from": "m-9",
            "to": "m-10",
            "type": "friend"
        },
        {
            "id": "l33",
            "from": "m-10",
            "to": "m-11",
            "type": "friend"
        },
        {
            "id": "l34",
            "from": "m-11",
            "to": "m-12",
            "type": "friend"
        },
        {
            "id": "l35",
            "from": "m-12",
            "to": "m-13",
            "type": "friend"
        },
        {
            "id": "l36",
            "from": "m-13",
            "to": "m-5",
            "type": "friend"
        },
        {
            "id": "l101",
            "from": "m-7",
            "to": "f-25",
            "type": "collegue"
        },
        {
            "id": "l102",
            "from": "m-7",
            "to": "f-26",
            "type": "collegue"
        },
        {
            "id": "l103",
            "from": "m-9",
            "to": "f-26",
            "type": "collegue"
        },
        {
            "id": "l104",
            "from": "m-9",
            "to": "f-25",
            "type": "collegue"
        },
        {
            "id": "l105",
            "from": "f-25",
            "to": "f-26",
            "type": "collegue"
        },
        {
            "id": "l106",
            "from": "m-7",
            "to": "m-9",
            "type": "collegue"
        },
        {
            "id": "l107",
            "from": "f-26",
            "to": "f-28",
            "type": "friend"
        },
        {
            "id": "l108",
            "from": "f-27",
            "to": "f-28",
            "type": "friend"
        },
        {
            "id": "l109",
            "from": "f-27",
            "to": "f-29",
            "type": "friend"
        },
        {
            "id": "l110",
            "from": "f-10",
            "to": "f-29",
            "type": "friend"
        },
        {
            "id": "l111",
            "from": "f-29",
            "to": "f-33",
            "type": "friend"
        },
        {
            "id": "l112",
            "from": "f-29",
            "to": "f-32",
            "type": "friend"
        },
        {
            "id": "l113",
            "from": "f-29",
            "to": "f-31",
            "type": "friend"
        },
        {
            "id": "l114",
            "from": "f-24",
            "to": "f-31",
            "type": "friend"
        },
        {
            "id": "l115",
            "from": "f-24",
            "to": "f-32",
            "type": "friend"
        },
        {
            "id": "l116",
            "from": "f-24",
            "to": "f-33",
            "type": "friend"
        },
        {
            "id": "l117",
            "from": "f-24",
            "to": "f-23",
            "type": "friend"
        },
        {
            "id": "l118",
            "from": "f-23",
            "to": "f-22",
            "type": "friend"
        },
        {
            "id": "l119",
            "from": "f-22",
            "to": "f-21",
            "type": "friend"
        },
        {
            "id": "l120",
            "from": "f-21",
            "to": "f-20",
            "type": "friend"
        },
        {
            "id": "l121",
            "from": "f-20",
            "to": "f-19",
            "type": "friend"
        },
        {
            "id": "l122",
            "from": "f-19",
            "to": "f-18",
            "type": "friend"
        },
        {
            "id": "l123",
            "from": "f-18",
            "to": "f-17",
            "type": "friend"
        },
        {
            "id": "l124",
            "from": "f-17",
            "to": "f-16",
            "type": "friend"
        },
        {
            "id": "l125",
            "from": "f-16",
            "to": "f-30",
            "type": "friend"
        },
        {
            "id": "l126",
            "from": "f-19",
            "to": "f-30",
            "type": "friend"
        },
        {
            "id": "l130",
            "from": "f-15",
            "to": "m-10",
            "type": "friend"
        },
        {
            "id": "l131",
            "from": "f-23",
            "to": "m-4",
            "type": "friend"
        },
        {
            "id": "l132",
            "from": "f-15",
            "to": "m-7",
            "type": "friend"
        },
        {
            "id": "l133",
            "from": "f-12",
            "to": "m-13",
            "type": "friend"
        },
        {
            "id": "l134",
            "from": "f-21",
            "to": "m-12",
            "type": "friend"
        },
        {
            "id": "l135",
            "from": "f-29",
            "to": "m-11",
            "type": "friend"
        },
        {
            "id": "l136",
            "from": "f-13",
            "to": "m-11",
            "type": "friend"
        },
        {
            "id": "l137",
            "from": "f-13",
            "to": "m-7",
            "type": "friend"
        },
        {
            "id": "l138",
            "from": "f-13",
            "to": "m-12",
            "type": "friend"
        },
        {
            "id": "l139",
            "from": "f-13",
            "to": "m-6",
            "type": "friend"
        },
        {
            "id": "l140",
            "from": "f-17",
            "to": "f-9",
            "type": "friend"
        },
        {
            "id": "l141",
            "from": "f-2",
            "to": "m-4",
            "type": "collegue"
        },
        {
            "id": "l142",
            "from": "f-5",
            "to": "m-13",
            "type": "friend"
        },
        {
            "id": "l143",
            "from": "f-7",
            "to": "f-20",
            "type": "friend"
        }
    ]
}
Download Data