Directory

← Back

GraphTree for Vaadin

Graph UI in Tree form(one way relationship)

Author

Rating

Popularity

<100

It renders graph nodes in a tree form, top to bottom, handles only one way relationship.

Features:-

  • Left Click listener on graph node.
  • Set Standard node properties, like color, opacity etc for every node
  • Set mouse tool tip (will be displayed on mouse hover)
  • Set Labels and type of nodes.

Checkout example code in the highlights.

Note: this is a javascript component and it uses jquery and raphel. If you are running vaadin version <=7.0.0.alpha3 use 0.0.1 version For Vaadin 7.0+ use 0.0.5 version For Vaadin 7.1+ use latest version

Sample code

        GraphJSComponent graphJSComponent = new GraphJSComponent();
        graphJSComponent.setNodesSize(120, 50);
		graphJSComponent.setLeftClickListener(new GraphJsLeftClickListener() {
			
			@Override
			public void onLeftClick(String id, String type, String parentId) {
				System.out.println(id + " "+ type + " "+ parentId);
			}
		});
        graphJSComponent.setImmediate(true);
        
        String lhtml = "<div id='graph' class='graph' ></div>";//add style='overflow:scroll' if required
        Label graphLabel = new Label(lhtml, Label.CONTENT_XHTML);
        
        layout.addComponent(graphLabel);
        layout.addComponent(graphJSComponent);

		try {
			graphJSComponent.addNode("fruits", "Fruits I Like", "level 1", null, null);//Give parent id as null for root node
			graphJSComponent.getNodeProperties("fruits").put("title", "Fruits I Like"); 
			graphJSComponent.addNode("watermelon", "Watermelon", "level 2", null, "fruits");//first child of node with id fruits
			graphJSComponent.getNodeProperties("watermelon").put("title", "Its a very juicy fruit."); 
			graphJSComponent.addNode("mango", "Mango", "level 2", null, "fruits");//second child of node with id fruits
			graphJSComponent.getNodeProperties("mango").put("title", "Katrina Kaif's favourite."); 
			graphJSComponent.addNode("apple", "Apple", "level 2", null, "fruits");//third child of node with id fruits
			graphJSComponent.getNodeProperties("apple").put("title", "One apple a day, keeps the doctor away"); 
			graphJSComponent.getNodeProperties("apple").put("fill", "#F00");
			graphJSComponent.getNodeProperties("mango").put("fill", "yellow");
			
			graphJSComponent.addNode("5", "Hapoos", "level 3", null, "mango");//child of mango node
			graphJSComponent.getNodeProperties("5").put("title", "One of the best mangos"); 
			
			graphJSComponent.addNode("6", "Green", "level 3", null, "watermelon");//child of watermelon node
			graphJSComponent.getNodeProperties("6").put("title", "Green from outside, red inside"); 
			graphJSComponent.getNodeProperties("6").put("fill", "#0F0");
			
			//Another Tree in the same graph
			graphJSComponent.addNode("fruitsnotlike", "Fruits I Dont Like", "level 1",  null, null);//Give parent id as null
			graphJSComponent.getNodeProperties("fruitsnotlike").put("title", "Another tree in the same graph"); 
			graphJSComponent.addNode("lichy", "Lichy", "level 2", null, "fruitsnotlike");//first child of node with id fruitsnotlike
			graphJSComponent.getNodeProperties("lichy").put("title", "because its nto easy to eat it.");
			graphJSComponent.getNodeProperties("lichy").put("opacity", "0.2"); 
			graphJSComponent.addNode("redlichy", "Red Lichy", "level 3", null, "lichy");
			graphJSComponent.getNodeProperties("redlichy").put("title",  "red lichy"); 
			graphJSComponent.refresh();//Call refresh after you are done with your changes
		} catch (Exception e) {
			e.printStackTrace();
		}//

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

Added getNode(), isNodePresent() methods support for setting icons, give any icon image url while adding the node(you can set icon width height, default is 16x16). you can put icon in you theme folder and use this url /VAADIN/themes/themename/img/icon.png

Released
2014-07-23
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.1+
Vaadin 7.0+ in 0.0.5
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer

GraphTree for Vaadin - Vaadin Add-on Directory

Graph UI in Tree form(one way relationship) GraphTree for Vaadin - Vaadin Add-on Directory
It renders graph nodes in a tree form, top to bottom, handles only one way relationship. Features:- - Left Click listener on graph node. - Set Standard node properties, like color, opacity etc for every node - Set mouse tool tip (will be displayed on mouse hover) - Set Labels and type of nodes. Checkout example code in the highlights. Note: this is a javascript component and it uses jquery and raphel. If you are running vaadin version <=7.0.0.alpha3 use 0.0.1 version For Vaadin 7.0+ use 0.0.5 version For Vaadin 7.1+ use latest version
Online