Creating a bubble chart

The bubbleChart component renders the data points displayed as colored circles with an optional text label inside.

How to do it...

A simple definition for a bubble chart to list public road mileage, the number of fatal crashes, and average annual daily traffic for a list of states is given as follows:

<p:bubbleChart value="#{bubbleChartController.model}" style="height:250px" xaxisLabel="Number of Fatal Crashes" yaxisLabel="Public Road Mileage" />

The chart will be rendered as shown in the following screenshot:

The model that binds to the component should be an instance of org.primefaces.model.chart.BubbleChartModel.

BubbleChartModel model = new BubbleChartModel();

model.add(new BubbleChartSeries("California", 3576, 170506, 4455));
model.add(new BubbleChartSeries("Texas", 3248, 296259, 1710));
model.add(new BubbleChartSeries("Florida", 2496,114422, 3104));
model.add(new BubbleChartSeries("New York", 1422, 112347, 2885));
model.add(new BubbleChartSeries("Georgia...