Directory

visjs-vaadin-component

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

View larger

Close

View larger

Close

View larger

Close

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

• Online Demo
• Issue tracker
• Source Code

Compatibility