Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
GChart
The GChart component needs a GChartModel object that can be created with a GChartModelBuilder. It's also possible to add an ajax listener on the "select" event. The event contains a reference to a JSONArray object with the information about the selected rows.
MushroomsOnionsType
Source

<script src="https://www.gstatic.com/charts/loader.js"></script>
<p:messages id="messages">
   <p:autoUpdate />
</p:messages>
<p:outputPanel id="container" layout="block">
    <h:panelGrid columns="4">
        <h:outputText value="Mushrooms" />
        <h:outputText value="Onions" />
        <h:outputText value="Type" />
        <h:panelGroup/>
        <p:inputText converter="javax.faces.Integer" value="#{basicGChartController.mushrooms}" />
        <p:inputText converter="javax.faces.Integer" value="#{basicGChartController.onions}" />
        <h:selectOneMenu value="#{basicGChartController.chartType}">
            <f:selectItems value="#{basicGChartController.types}"/>
        </h:selectOneMenu>
        <p:commandButton value="Generate" update="container" action="#{basicGChartController.generateModel}" />
    </h:panelGrid>

    <pe:gChart value="#{basicGChartController.chart}" title="How Much Pizza I Ate Last Night">
        <p:ajax listener="#{basicGChartController.onSelect}"/>
    </pe:gChart>
</p:outputPanel>
            
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-2023,PrimeFaces: 14.0.5,PrimeFaces Extensions: 14.0.5,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2024-09-10 21:01