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