Google Charts is extremely versatile, in this example we use it to display an organizational Chart. It's possible to use
a TreeNode to generate the GChartModel for this kind of charts.
Source
<script src="https://www.gstatic.com/charts/loader.js"></script>
<p:tabView>
<p:tab title="Standard">
<pe:gChart value="#{organizationalGChartController.standardModel}"/>
</p:tab>
<p:tab title="TreeDataModel">
<pe:gChart value="#{organizationalGChartController.treeModel}"/>
</p:tab>
</p:tabView>
@Named
@RequestScoped
public class OrganizationalGChartController implements Serializable {
private static final long serialVersionUID = 253762400419864192L;
private GChartModel standardModel = null;
private GChartModel treeModel = null;
public GChartModel getStandardModel() {
return standardModel;
}
public GChartModel getTreeModel() {
return treeModel;
}
@PostConstruct
public void generateModel() {
standardModel = new GChartModelBuilder().setChartType(GChartType.ORGANIZATIONAL).addColumns("Name", "Manager")
.addRow("Mike", "").addRow("Alice", "Mike").addRow("Jim", "Mike").addRow("Bob", "Alice")
.addOption("size", "large").build();
final TreeNode mike = new DefaultTreeNode("Mike");
treeModel = new GChartModelBuilder().setChartType(GChartType.ORGANIZATIONAL).addColumns("Name", "Manager")
.importTreeNode(mike).addOption("size", "large").build();
}
}