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

Sharing is Caring
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 the requirement is to show 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>

 

Show chart

and when the user changes Department

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

Related Posts

0 thoughts on “Show chart for every row of ViewObject using af:iterator in ADF Faces”

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *