Let us see how we can programmatically change Y1Axis bar data based on the selected slice on a pie graph.
First we need to set up the data for pie graph
- Create Countries, Restaurants and Revenue tables and populate some data in those based on the script, which has been taken from AMIS blog
- Create a viewObject named CountryFinanceVO with below query:
Drag CountryFinanceVO on to a page as pie graph of Ring-Bar type.
In the next window use following configuration
Add a shapeAttributes component to pieGraph and specify a clickListener, which will listen to the click event on a pie slice
Pie graph will always show Y1Axis bar corresponding to the data of first row in the view object rowset. So, we will need to make the row corresponding to the slice clicked as the first row of the rowset in order to show the related data on the Y1Axis bar. To achieve this, we will modify our View Object query as below
We will use a bind variable which will contain the value of countryId for the selected slice. We have the union of two queries, first gets the row with the selected country_id and second gets the all other rows. The bind variable has been defaulted with the value of first country_id.
In pieClickListener we will retrieve country_id of the selected slice and then invoke ExecuteWithParams with that as parameter.
Now when you click on any slice, the slice will move to extreme right which is the location of the first series in the graph, and Y1Axis bar will display corresponding data.
First we need to set up the data for pie graph
- Create Countries, Restaurants and Revenue tables and populate some data in those based on the script, which has been taken from AMIS blog
- Create a viewObject named CountryFinanceVO with below query:
SELECT countries.id country_id, countries.name country_name, SUM(revenue) country_revenue, SUM(costs) country_costs FROM dve_countries countries, dve_restaurants restaurants, dve_revenue revenue WHERE countries.id = restaurants.country_id AND restaurants.id = revenue.restaurant_id GROUP BY countries.id, countries.name- Create an application module named GraphAM and add a CountryFinanceVO instance into it
Drag CountryFinanceVO on to a page as pie graph of Ring-Bar type.
In the next window use following configuration
Add a shapeAttributes component to pieGraph and specify a clickListener, which will listen to the click event on a pie slice
<dvt:pieGraph id="pieGraph1"
value="#{bindings.CountryFinancesVO1.graphModel}"
subType="RING_BAR" shortDesc="Pie graph"
binding="#{pageFlowScope.graphBean.pieGraphBinding}"
dataSelection="single">
<dvt:shapeAttributesSet>
<dvt:shapeAttributes component="GRAPH_SLICE" clickable="true"
clickListener="#{pageFlowScope.graphBean.pieClickListener}"/>
</dvt:shapeAttributesSet>
<dvt:background>
<dvt:specialEffects/>
</dvt:background>
<dvt:graphPieFrame/>
<dvt:y1Axis/>
<dvt:sliceLabel/>
<dvt:pieLabel rendered="true"/>
<dvt:legendArea automaticPlacement="AP_NEVER"/>
</dvt:pieGraph>
Pie graph will always show Y1Axis bar corresponding to the data of first row in the view object rowset. So, we will need to make the row corresponding to the slice clicked as the first row of the rowset in order to show the related data on the Y1Axis bar. To achieve this, we will modify our View Object query as below
SELECT countries.id country_id, countries.name country_name, SUM(revenue) country_revenue, SUM(costs) country_costs FROM dve_countries countries, dve_restaurants restaurants, dve_revenue revenue WHERE countries.id = restaurants.country_id AND restaurants.id = revenue.restaurant_id AND countries.id = :querySelectedId GROUP BY countries.id , countries.name union all SELECT countries.id country_id, countries.name country_name, SUM(revenue) country_revenue, SUM(costs) country_costs FROM dve_countries countries, dve_restaurants restaurants, dve_revenue revenue WHERE countries.id = restaurants.country_id AND restaurants.id = revenue.restaurant_id AND countries.id != :querySelectedId GROUP BY countries.id , countries.name
We will use a bind variable which will contain the value of countryId for the selected slice. We have the union of two queries, first gets the row with the selected country_id and second gets the all other rows. The bind variable has been defaulted with the value of first country_id.
In pieClickListener we will retrieve country_id of the selected slice and then invoke ExecuteWithParams with that as parameter.
public void pieClickListener(ClickEvent clickEvent)
{
ComponentHandle handle = clickEvent.getComponentHandle();
SeriesComponentHandle handleSeries = (SeriesComponentHandle)handle;
if (handle instanceof SeriesComponentHandle)
{
Attributes[] seriesInfo =
((SeriesComponentHandle) handle).getSeriesAttributes();
String idValue = null;
if (seriesInfo != null)
{
for (Attributes attrs: seriesInfo)
{
idValue=
(String) attrs.getValue(Attributes.ID_VALUE);
}
OperationBinding op = ADFUtils.findOperation("ExecuteWithParams");
op.getParamsMap().put("querySelectedId",idValue);
op.execute();
AdfFacesContext.getCurrentInstance().addPartialTarget(pieGraphBinding);
}
}
}
Now when you click on any slice, the slice will move to extreme right which is the location of the first series in the graph, and Y1Axis bar will display corresponding data.
