<!doctype html> <html> <head> <title>Network | Basic usage</title> <script type="text/javascript" src="http://www.visjs.org/dist/vis.js"></script> <link href="http://www.visjs.org/dist/vis.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #div_graph { width: 1400px; height: 1000px; border: 1px solid lightgray; } </style> </head> <body> <p> Create a simple network with some nodes and edges. </p> <div id="visualization"></div> <script type="text/javascript"> var nodes = new vis.DataSet([ {id: '1', label: 'Test1', step : 1}, {id: '2', label: 'Test2', step : 2}, {id: '3', label: 'Test3', step : 3} ]); var edges = new vis.DataSet([ {from: '1', to: '2', label: '1'}, {from: '3', to: '2'} ]); var currentStep = 1; var maxStep = nodes.length; var nodesView = new vis.DataView(nodes, { filter: function(node) { if(node.hasOwnProperty('step')) return node.step <= currentStep; else return false; } }); var options = { width : '100%', height : '100%', }; console.log(nodesView, edges) // create a network var container = document.getElementById('visualization'); var data = { nodes: nodesView, edges: edges }; var network = new vis.Network(container, data, options); // nodesView.refresh(); function StepNext() { currentStep = currentStep + 1; if(currentStep > maxStep) currentStep = maxStep; nodesView.refresh(); } function StepBack() { currentStep = currentStep - 1; if(currentStep < 1) currentStep = 1; nodesView.refresh(); } </script> <button id="btnPrevious" type="button" onclick="StepBack();"><<</button> <button id="btnNext" type="button" onclick="StepNext();">>></button> </body> </html>