Sunday, January 11, 2015

Change bar data based on selected slice: ADF Pie Graph

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:
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.

No comments:

Post a Comment