Directory

← Back

visjs-vaadin-component

Create highly customizable, interactive network diagrams with vis.js-library.

Author

Rating

Popularity

100+

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);

Compatibility

(Loading compatibility data...)

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. visjs-vaadin-component - Vaadin Add-on Directory
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
Online Demo
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

Online