ADF UI- Using New DVT Component Picto Chart in ADF 12.2.1.1

Hello All

Couple of weeks ago Oracle released new version of ADF & Jdeveloper i.e. 12.2.1.1
This release comes with many new features and data visualization components, one of them is Picto Chart

DVT Component Picto Chart is used to visualize pictorial presentation of Numbers and it uses a count attribute to present chart portion, If you need to show different types of information in picto chart then more than one count attribute can be used


See how can we use Picto Chart in ADF Application
Here I am showing number of Gold, Silver and Bronze medals won by a country in Olympics
For this I have created a table in HR Schema

CREATE TABLE  HR.MEDALS 
  (
     MEDAL_TYPE  VARCHAR2(20 BYTE) NOT NULL ENABLE,
     COUNTS      NUMBER(3,0),
    CONSTRAINT  MEDALS_PK  PRIMARY KEY ( MEDAL_TYPE )
  );

MEDAL_TYPE- Gold, Silver and Bronze
COUNTS- No. of Medals/Category

This data is present in Medals table

Next step is to prepare model using Medals table (Created query based viewObject and added it to Application Module)

Drop viewObject on page from data control as Picto Chart

Configure Picto Chart , Here I am showing MedalType as Name and Counts attribute will replicate Name portion in picto chart

XML Source of dvt:pictoChart-

<dvt:pictoChart id="pictoChart1" value="#{bindings.Medals1.collectionModel}" var="row"
                                    inlineStyle="width:550px;height:400px;">
                        <dvt:pictoChartItem name="#{row.MedalType}" count="#{row.Counts}" id="pci1"/>
                    </dvt:pictoChart>

Output-

Here we can see that default rectangle shape is replicated according to counts attribute value but all medals appearing in same shape and color so it is not easy to differentiate between different types

So for better look we can set shape and color of dvt:pictoChartItem according to MedalType

<dvt:pictoChart id="pictoChart1" value="#{bindings.Medals1.collectionModel}" var="row"
                                    inlineStyle="width:550px;height:400px;">
                        <dvt:pictoChartItem name="#{row.MedalType}" count="#{row.Counts}" id="pci1"
                                            color="#{row.MedalType=='Gold' ? '#FFD700' : row.MedalType=='Silver' ? '#C0C0C0' : '#CD7F32'}"
                                            shape="#{row.MedalType=='Gold' ? 'circle' : row.MedalType=='Silver' ? 'star' : 'diamond'}"/>
                    </dvt:pictoChart>

Output-

Now It is looking good , User will be able to differentiate between medals just by looking at chart

Enable Selection in dvt:pictoChart

To enable selection in dvt:pictoChart set selectionMode to single and to get selected value we can use same selectionListener code that is used for tagCloud component in previous post

Run and check application

Sample ADF Application (Jdev 12.2.1.1)-Download
Cheers :) Happy Learning