PrimeFaces Extensions Showcase

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.

Mushrooms	Onions	Type

Source

XHTML page
Managed bean


<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>


@Named
@RequestScoped
public class BasicGChartController implements Serializable {

    private static final long serialVersionUID = 253762400419864192L;

    private final Random random = new Random();
    private int mushrooms = random.nextInt(10);
    private int onions = random.nextInt(10);
    private GChartType chartType = GChartType.PIE;
    private GChartModel chartModel = null;

    public GChartModel getChart() {
        return chartModel;
    }

    @PostConstruct
    public void generateModel() {
        // tooltip use values
        final HashMap<String, String> tooltip = new HashMap<>();
        tooltip.put("text", "value");

        // color each slice
        final List<String> colors = Arrays.asList("#F39C12", "#7D3C98");

        chartModel = new GChartModelBuilder().setChartType(getChartType())
                    .addOption("colors", colors)
                    .addOption("tooltip", tooltip)
                    .addOption("pieSliceText", "percentage")
                    .addColumns(new DefaultGChartModelColumn("Topping", "string"),
                                new DefaultGChartModelColumn("Slices", "number"))
                    .addRow("Mushrooms", mushrooms).addRow("Onions", onions).build();
    }

    public void onSelect(final SelectEvent event) {
        final JsonArray value = (JsonArray) event.getObject();
        if (value.size() > 0) {
            final JsonElement element = value.get(0);
            final String label = new ArrayList<>(getChart().getRows())
                        .get(element.getAsJsonObject().get("row").getAsInt()).getLabel();
            FacesContext.getCurrentInstance().addMessage(null,
                        new FacesMessage(FacesMessage.SEVERITY_INFO, "You have selected: " + label, null));
        }
    }

    public int getMushrooms() {
        return mushrooms;
    }

    public void setMushrooms(final int mushrooms) {
        this.mushrooms = mushrooms;
    }

    public int getOnions() {
        return onions;
    }

    public void setOnions(final int onions) {
        this.onions = onions;
    }

    public GChartType getChartType() {
        return chartType;
    }

    public void setChartType(final GChartType chartType) {
        this.chartType = chartType;
    }

    public List<GChartType> getTypes() {
        return Arrays.asList(new GChartType[] {GChartType.AREA, GChartType.BAR, GChartType.COLUMN, GChartType.PIE, GChartType.LINE});
    }
}