GraphTree for Vaadin
Graph UI in Tree form(one way relationship)
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(); }//
Links
Compatibility
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