Directory

visjs-addon

visjs addon (network)

View larger

Close

View larger

Close

View larger

Close

*Add-on still support only for Network-diagram

Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d, and Graph3d.

The vis.js library is developed by Almende B.V, as part of CHAP. Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile browsers (with full touch support).

http://visjs.org/ contains documentation, downloads and live examples of vis.js. The sourcecode of vis.js is available at Github. For questions, issues, and suggestions please use the issues section of the Github project.

my skype: sameeraroshan.uom

Sample code

public class BasicUsageView extends HorizontalLayout implements View {
    NetworkDiagram networkDiagram;
    Options options;
    @Override
    public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {
        setSizeFull();
        options = new Options();
        networkDiagram = new NetworkDiagram(options);
        networkDiagram.setSizeFull();
        addComponent(networkDiagram);

        //crete nodes
        Node node1 = new Node(1,"Node 1");
        Node node2 = new Node(2,"Node 2");
        Node node3 = new Node(3,"Node 3");
        Node node4 = new Node(4,"Node 4");
        Node node5 = new Node(5,"Node 5");
        Node node6 = new Node(6,"Node 6");

        //create edges
        Edge edge1 = new Edge(node1.getId(),node2.getId());
        Edge edge2 = new Edge(node1.getId(),node3.getId());
        Edge edge3 = new Edge(node2.getId(),node5.getId());
        Edge edge4 = new Edge(node2.getId(),node4.getId());

        networkDiagram.addNode(node1);
        networkDiagram.addNode(node2,node3,node4,node5,node6);
        networkDiagram.addEdge(edge1,edge2,edge3,edge4);
    }
}

public class ShapesView extends HorizontalLayout implements View {
    NetworkDiagram networkDiagram;
    Options options;

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {
        setSizeFull();
        options = new Options();
        networkDiagram = new NetworkDiagram(options);
        networkDiagram.setSizeFull();
        addComponent(networkDiagram);

        Node node1 = new Node(1, "circle", Node.Shape.circle, "group_x");
        Node node2 = new Node(2, "ellipse", Node.Shape.ellipse, "group_x");
        Node node3 = new Node(3, "database", Node.Shape.database, "group_x");
        Node node4 = new Node(4, "box", Node.Shape.box, "group_x");
        Node node5 = new Node(5, "shapes\nand\nsizes", Node.Shape.box, "group_main");

        Edge edge1 = new Edge(3, 1, Edge.Style.arrow);
        Edge edge2 = new Edge(1, 4, Edge.Style.dashLine);
        Edge edge3 = new Edge(1, 2, Edge.Style.arrowCenter);

        networkDiagram.addNode(node1, node2, node3, node4, node5);
        networkDiagram.addEdge(edge1, edge2, edge3);

        int id = 6;
        int mainId = 5;

        for (int size = 1; size < 4; size++) {
            int groupId = id;
            Node node = new Node(id, "size " + size, Node.Shape.box, "group" + size);
            node.setMass(size);
            networkDiagram.addNode(node);
            networkDiagram.addEdge(new Edge(mainId, id, new Color("gray"), size));
            id++;

            for (Node.Shape shape : Node.Shape.values()) {
                if (shape != Node.Shape.image) {
                    node = new Node(id, shape.toString(), shape, "group" + size);
                    networkDiagram.addNode(node);
                    networkDiagram.addEdge(new Edge(groupId, id, new Color("red"), size));
                    id++;
                }
            }
        }
    }
}

package visjsDemo.views;

import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener;
import com.vaadin.ui.*; 
import org.vaadin.visjs.networkDiagram.Edge;
import org.vaadin.visjs.networkDiagram.NetworkDiagram;
import org.vaadin.visjs.networkDiagram.Node;
import org.vaadin.visjs.networkDiagram.options.Options;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;
 
public class RandomNodesView extends VerticalLayout implements View {
    NetworkDiagram networkDiagram;
    Options options;
    Button button;
    Label label;
    TextField textField;
    HorizontalLayout horizontalLayout;
    List<Node> nodeList;
    List<Edge> edgeList;
    Random random;

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {
        setSizeFull();
        horizontalLayout = new HorizontalLayout();
        random = new Random();
        edgeList = new ArrayList<>();
        nodeList = new ArrayList<>();
        options = new Options();
        button = new Button("Go");
        label = new Label("Number of nodes:");
        textField = new TextField();
        horizontalLayout.addComponent(label);
        horizontalLayout.addComponent(textField);
        horizontalLayout.addComponent(button);
        addComponent(horizontalLayout);
        setExpandRatio(horizontalLayout, 1);
        networkDiagram = new NetworkDiagram(options);
        networkDiagram.setSizeFull();
        addComponent(networkDiagram);
        setExpandRatio(networkDiagram, 20);

        button.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent clickEvent) {

                String value = textField.getValue();
                if (value != null) {
                    int nodesNumber = 0;
                    try {
                        nodesNumber = Integer.parseInt(textField.getValue());
                    } catch (Exception e) {
                        Notification.show("enter number");
                        return;
                    }
                    nodeList.clear();
                    edgeList.clear();
                    for (int i = 0; i < nodesNumber; i++) {
                        nodeList.add(new Node(i, "node:" + i));
                        int to = random.nextInt(nodesNumber);
                        edgeList.add(new Edge(i, to));
                    }
                    networkDiagram.clear();
                    networkDiagram.updateNodes(nodeList);
                    networkDiagram.updateEdges(edgeList);
                } else {
                    Notification.show("enter number");
                }
            }
        });


    }
}

Links

• Issue Tracker
• Source Code
• Online Demo
• Demo Source Code

Compatibility