Search code examples
phpmysqljsonvis.jsvis.js-network

How to display JSON data with `vis.js`

I want to display data from MySQL with vis.js. I get data with JSON, but I am having this error:

Error: Node must have an id

  throw new Error("Node must have an id");
  -------^


function tampil()
{
	$.ajax({
		type:"GET",
		cache :false,
		dataType: "json",
		url:"fetch.php",
		success: function(data){
			console.log(data);
			
			var vertex = new vis.DataSet([
			    {id:data[0], label:data[1]}
			]);
			var hubung = new vis.DataSet([
			    {from:data[2], to:data[3]}
			]);
			var myDiv = document.getElementById("media");
			var data = {
				nodes : vertex,
				edges : hubung
			}
			
			var options = {};
			
			var network = new vis.Network(myDiv,data,options);
		}
	});
}
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="js/vis.js"></script>
	<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/vis.css" />
</head>
<body>
 <button type="button" onclick="tampil()">proses</button>
 <div id="media" style="width:500px;height:500px;"></div>
</body>
</html>

and my server sid like this

Solution

  • solved, in JavaScript I've added the following code:

    function tampil()
{
	$.ajax({
		type:"GET",
		cache :false,
		dataType: "json",
		url:"nodes.php",
		success: function(data){
			console.log(data);
				
			var vertex = new vis.DataSet();
			var hubung = new vis.DataSet();
			var myDiv = document.getElementById("media");
			var data = {
				nodes : vertex,
				edges : hubung
			}
			
			var options = {};
			
			var network = new vis.Network(myDiv,data,options);
			
			$.getJSON('edges.php', function(edges) {
				hubung.add(edges);
			});
			$.getJSON('nodes.php', function(nodes) {
				vertex.add(nodes);
			});
		}
	});
}