<!doctype html> <html> <head> <title>Network | Shapes</title> <style type="text/css"> body { font: 10pt arial; } #mynetwork { width: 100%; height: 600px; border: 1px solid lightgray; } </style> <script type="text/javascript" src="../../dist/vis.js"></script> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var nodes = null; var edges = null; var network = null; function draw() { nodes = [ {id: 1, label: 'circle', shape: 'circle', group: 'group_x'}, {id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'}, {id: 3, label: 'database', shape: 'database', group: 'group_x'}, {id: 4, label: 'box', shape: 'box', group: 'group_x'} ]; edges = [ {from: 3, to: 1, style: 'arrow'}, {from: 1, to: 4, style: 'dash-line'}, {from: 1, to: 2, style: 'arrow-center'} ]; var mainId = 5; nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'}); var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star']; var id = 6; for (var size = 1; size < 4; size++) { var groupId = id; nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size}); edges.push({from: mainId, to: groupId, color: 'gray', width: size}); id++; for (var i in shapes) { if (shapes.hasOwnProperty(i)) { nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size}); edges.push({from: groupId, to: id, color: 'gray', width: size}); id++; } } } // create a network var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { stabilize: false }; network = new vis.Network(container, data, options); } </script> </head> <body onload="draw()"> <div id="mynetwork"></div> <div id="info"></div> </body> </html>