Follow by Email

Tuesday, 28 June 2016

Show chart for every row of ViewObject using af:iterator in ADF Faces


Hello All

This post is about another use of af:iterator component, When we show Employees ViewObject data as a chart then all Employees appears in a single chart but if requirement is to show separate chart for each department ;) See how can we do it

Here I am using Departments and Employees table of HR Schema, Prepare model using both tables, Default view link is created between departments and employees view object (using department Id)

Here I am going to show employees chart department wise so dropped Departments view object as selectOneChoice on page and created chart using Employees viewObject to show Employee's salary and commission

To create bar chart-
Select Employees viewObject from data control and drop on page as chart

Select Bar in char category and see chart configuration -



<dvt:barChart id="barChart2" var="row" value="#{bindings.Employees31.collectionModel}"
                              partialTriggers="soc1" styleClass="AFStretchWidth">
                    <dvt:chartLegend id="cl2"/>
                    <f:facet name="dataStamp">
                        <af:group id="g2">
                            <dvt:chartDataItem id="di3" value="#{row.Salary}" group="#{row.FirstName} #{row.LastName}"
                                               series="#{bindings.Employees31.hints.Salary.label}"/>
                            <dvt:chartDataItem id="di4" value="#{row.CommissionPct}"
                                               group="#{row.FirstName} #{row.LastName}"
                                               series="#{bindings.Employees31.hints.CommissionPct.label}"/>
                        </af:group>
                    </f:facet>
                </dvt:barChart>

Here you can see how it looks, All Employees appears in same chart , if user changes Departments from list then graph will show Employees of that Department only beacuse of master- detail relation


Now requirement is to show separate chart for each Employee of selected Department so for this just surround bar chart with af:iterator and iterator's value refers to Employees collection model and then chart refers it's value from iterator's var
Set inline style property of chart to fix it's height width and to show in inline block

<af:panelGroupLayout id="pgl1" partialTriggers="soc1">
                    <af:iterator id="i1" value="#{bindings.Employees3.collectionModel}" var="iter" rows="100">
                        <dvt:barChart id="barChart1" var="row" value="#{iter}"
                                      inlineStyle="height:170px;width:180px;display:inline-block;">
                            <dvt:chartLegend id="cl1"/>
                            <f:facet name="dataStamp">
                                <af:group id="g1">
                                    <dvt:chartDataItem id="di1" value="#{row.Salary}"
                                                       group="#{row.FirstName} #{row.LastName}"
                                                       series="#{bindings.Employees3.hints.Salary.label}"/>
                                    <dvt:chartDataItem id="di2" value="#{row.CommissionPct}"
                                                       group="#{row.FirstName} #{row.LastName}"
                                                       series="#{bindings.Employees3.hints.CommissionPct.label}"/>
                                </af:group>
                            </f:facet>
                        </dvt:barChart>
                    </af:iterator>
                </af:panelGroupLayout>


and when user changes Department



Sample ADF Application (Jdeveloper 12.1.3)- Download
Cheers :) Happy Learning

7 comments :

  1. William T. Carlo7 July 2016 at 21:16

    Thank you so much for this , I was looking for same

    ReplyDelete
  2. Hi Ashish,

    I have a use case, where I need to display Departments as a ListView in my jsf, and each row contains charts related to the Employees of that department. ex: For Department X, i want to show a chart of employees salary vs years of experience. Pretty much similar to the following chart in ALTA example: http://www.oracle.com/webfolder/ux/middleware/alta/gallery/img/browser/MyServicesApps-Graphs.png

    Do you have an example on how to do this?

    Thanks,
    Sapna

    ReplyDelete
    Replies
    1. Hi Sapna

      I don't have a sample application of this but you can do it easily , just drop a chart in a column and set it's value to same as table var like #{row} and set chart var attribute and refer chartItem values from this var

      See column sample code-

      < af:column id="c23" width="200" >
      < dvt:barChart id="chart1" value="#{row}" var="var" inlineStyle="height:150px;width:150px;" >
      < f:facet name="dataStamp" >
      < dvt:chartDataItem group="#{var.FirstName}" id="cdi1" value="#{var.Salary}"/ >
      < /f:facet >
      < /dvt:barChart >
      < /af:column >


      Ashish

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Ashish,


      Thanks for the reply.






















      Im unable to paste sample code, but right now the data from the first department is being rendered as a chart for every row. If I change the chart value binding from :
      <dvt:barChart id="barChart1" var="row" value="#{bindings.EmployeesVO.collectionModel}"
      to
      <dvt:barChart id="barChart1" var="row" value="#{item}", im unable to get accessors for Employee firstname and salary.

      Any ideas?

      Thanks,
      Sapna

      Delete
    2. Sapna

      To access child viewObject first you have to add it's binding in pageDef, I have posted a blog about it
      Check- ADF UI- Show DVT Chart inside af:table and other collection components
      Second case is yours

      Ashish

      Delete
  4. Dear, I like your blog very much, I can get many useful information. Hope that we can communicate with each other. By the way, have you ever used resize server 2003 boot partition ? Unfortunately I lost my partition. I do not know how to do.

    ReplyDelete