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.

<script src=""></script>
    <p:tab title="Standard">
        <pe:gChart value="#{organizationalGChartController.standardModel}"/>
    <p:tab title="TreeDataModel">
        <pe:gChart value="#{organizationalGChartController.treeModel}"/>
Components and more
Documentation pe:gChart
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
width width of the chart
height height of the chart
title Title of the chart
value Value of the component. Use the GChartModelBuilder to create a new GChartModel
widgetVar Name of the client side widget.
apiKey Google Maps API Key. Can also be provided globally in web.xml as primefaces.GOOGLE_MAPS_API_KEY
language he code for the language or locale that should be to customize text that might be part of the chart. Default is "en"
extender Name of javascript function to extend the options of the underlying GChart
Events (move mouse over the names to see classes)
Name Description
selectfired when a "row" is selected
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55