Creating a Pie Chart and Column Chart

You can create a chart against either the data in the main grid, or against aggregated grids. If you are creating a chart against the main grid, you must perform the aggregation in the chart. The method is the same as creating an aggregated grid.

Procedure: How to Create a Pie Chart

Create another panel to host the ibiPieChart.
Set the panel background color to #c0c0c0 to match the other panels.
Set the title of the panel to Category Sales.
Drag the ibiPieChart component onto the panel and adjust its size as described in previous topics.
Set the properties as follows:
- id=SUBPIE01
- ibiField=Sum.DOLLARS
- ibiNameField=CATEGORY
- ibiGroupBy=CATEGORY
- ibiParent=MAIN01
- ibiUseFiltered=true. The nested filters will also be applied to the pie chart.
- showDataTips=true. This is a Flex Builder property that displays the data tips on mouse-over, showing the values for the pie slices and their percentage of the total. Like many other Flex Builder properties, this one is optional.
To create a legend for the chart, select the first tab.
Tip: Since the ibiLegend is a separate component, you must use a panel or canvas to host it within the dimension of the chart. Otherwise, it will be positioned at the side, bottom, or top of the chart. In general, to overlay components, you need a canvas.
Drag and drop the ibiLegend component onto the panel containing the pie chart.
Set ibiParent of the legend to SUBPIE01.
Run the application.

Procedure: How to Add a Column Chart

Copy the panel containing the pie chart.
Delete the pie chart.
Insert an ibiColumnChart into the new panel and adjust its size to fit the panel.
Set the following properties:
- id=SUBCOL01
- ibiParent=MAIN01
- ibiGroupBy=ST
- ibiUseFiltered=true
- ibiXField=ST
- ibiYField=Sum.DOLLARS
Align the chart with the top-right corner, using the guidelines.
Run the application.