visjs-vaadin-component
Create highly customizable, interactive network diagrams with vis.js-library.
Wrapper for vis.js library. Currently only network diagram is supported. See http://visjs.org/network_examples.html
This is a port and heavy redesign of the vaadin-8 version here https://vaadin.com/directory/component/visjs4-addon
Most options and events are implemented but not roughly tested. Simple demo is on github. Large showcase is online here: https://visjs-vaadin-component.herokuapp.com
Sample code
NetworkDiagram nd = new NetworkDiagram(Options.builder().build()); nd.diagramSetSize("600px", "400px"); // Set Nodes nd.setNodes(new Node("1", "Node 1"), new Node("2", "Node 2"), new Node("3", "Node 3"), new Node("4", "Node 4"), new Node("5", "Node 5")); // Set Edges nd.setEdges(new Edge("1", "3"), new Edge("1", "2"), new Edge("2", "4"), new Edge("2", "5"), new Edge("3", "3")); nd.addSelectNodeListener(ev -> Notification.show("node selected"));
// Set Nodes final Node node0 = new Node("0", Nodes.builder().withGroup("diamonds")); final Node node1 = new Node("1", Nodes.builder().withGroup("diamonds")); final Node node2 = new Node("2", "dot 2", Nodes.builder().withGroup("dotsWithLabel")); final Node node3 = new Node("3", "dot 3", Nodes.builder().withGroup("dotsWithLabel")); final Node node4 = new Node("4", "dot 4", Nodes.builder().withGroup("dotsWithLabel")); nd = new NetworkDiagram(Options.builder() // .withNodes(Nodes.builder().withShape(Shape.dot).withSize(20)// .withFont(Font.builder().withSize(15).withColor("#ffffff").build())// .withBorderWidth(2) // .build()) // .withEdges(Edges.builder().withWidth(2).build()) // .withGroups(ImmutableMap.of("diamonds", Nodes.builder() .withColor(NodeColor.builder().withBackground("red").withBorder("white").build()) .withShape(Shape.diamond).build(), "dotsWithLabel", Nodes .builder().withLabel("I'm a dot").withShape(Shape.dot).withColorStr("cyan").build() ).build())) .build()); nd.diagramSetSize("800px", "800px"); nd.setNodes(node0, node1, node2, node3, node4); // Set Edges nd.setEdges("1", "0", "2", "0", "4", "3", "4", "0);
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Refactoring options. Introducing Builder Pattern for most classes
- Released
- 2019-03-08
- Maturity
- TESTED
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 10+
- Browser
- N/A
visjs-vaadin-component - Vaadin Add-on Directory
Create highly customizable, interactive network diagrams with vis.js-library.Issue tracker
Source Code
visjs-vaadin-component version 0.0.1
First implementation of network diagram
visjs-vaadin-component version 0.0.2
Refactoring options.
Introducing Builder Pattern for most classes