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.
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="jakarta.faces.Integer" value="#{basicGChartController.mushrooms}" />
<p:inputText converter="jakarta.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});
}
}