PrimeFaces Extensions Showcase

GChart

In this example we use a GeoChart to show data about countries. As you can see to add rows to our datatable we can use simple strings or java.util.Locale.

Source

XHTML page
Managed bean


<script src="https://www.gstatic.com/charts/loader.js"></script>
<pe:gChart value="#{geoChartGChartController.chart}" />


@Named
@RequestScoped
public class GeoChartGChartController implements Serializable {

    private static final long serialVersionUID = 253762400419864192L;

    private GChartModel chartModel = null;

    public GChartModel getChart() {
        return chartModel;
    }

    @PostConstruct
    public void generateModel() {

        final Locale englishLocale = Locale.ENGLISH;

        final Map<String, Object> colorAxis = new HashMap<String, Object>();
        colorAxis.put("colors", new String[] {"white", "orange"});

        chartModel = new GChartModelBuilder().setChartType(GChartType.GEO).addColumns("Country", "Popularity")
                    .addRow(Locale.GERMANY.getDisplayCountry(englishLocale), 1200)
                    .addRow(Locale.FRANCE.getDisplayCountry(englishLocale), 1800).addRow("Russia", 1800)
                    .addRow(Locale.ITALY.getDisplayCountry(englishLocale), 2000)
                    .addRow(Locale.CHINA.getDisplayCountry(englishLocale), 2200)
                    .addRow(Locale.US.getDisplayCountry(englishLocale), 2500).addOption("colorAxis", colorAxis).build();
    }
}

Use Cases

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
select	fired when a "row" is selected