Directory

← Back

visjs-addon

visjs addon (network)

Author

Contributors

Rating

*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");
                }
            }
        });


    }
}

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

Released Network Diagram for vis js 4+

Docs Avilable http://visjs.org/docs/network/

Released
2016-02-28
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.4+
Vaadin 7.0+ in 1.0.0.4
Browser
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Internet Explorer
Windows Phone

visjs-addon - Vaadin Add-on Directory

visjs addon (network) visjs-addon - Vaadin Add-on Directory
*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
Online