Theme
GChart
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>
            
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
Events (move mouse over the names to see classes)
Name Description
selectfired when a "row" is selected
PrimeFaces Extensions Showcase - © 2011-2018, PrimeFaces: 6.2, PrimeFaces Extensions: 6.2.4, JSF: mojarra 2.3.2, Server: jetty/9.4.2.v20170220, Build time: 2018-04-10 14:26
occured!
Message:
Timestamp:
StackTrace:
Developers
Thomas Andraschko andraschko.thomas@gmail.com
Oleg Varaksin ovaraksin@googlemail.com
Nilesh Namdeo Mali nileshmali86@gmail.com
Mauricio Fenoglio fenoglio.mauricio@gmail.com
Pavol Slaný pavol.slany@gmail.com
Sudheer Jonna sudheer.jonna@gmail.com