Tuesday, January 22, 2013

Programmatically creation of Bar Graph In ADF

Hi ,

In this post i would to explain the some basic approach for creating and changing the property of the bar graph.

"A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is sometimes called a column bar chart." from wikipedia .

There are different type of approach for creating the bar graph in oracle adf application.First one you can drag and drop VO from data controls as bar graph.While dragging and dropping the VO will ask some property i.e. Series value which you need to give and it will create the graph and add property into the page def file.

Although there are also other ways where you can pass value in following attribute of the bar graph to create bar graph manually.

1-value(manual and as well as drag /drop)
2-tabular data (for manual approach)


I am going to explain how we can create the model value for bar graph which we can pass in the tabular data attribute of bar graph .

Model for Tabular Data :

1-Define attribute /variable with following signature type
 It should be list and it will contains Object array.
 private List<Object[]> listObject;

2-create the setter and getter of the same attribute

public List<Object[]> getListObject() {
             return listObject;
    }
   public void setListObject(List<Object[]> listObject) {
        this.listObject = listObject;
    }
}

3-In the getter method we need to put series value which will render bar in the bar graph or graph chart.

    public List<Object[]> getListObject() {
        if (listObject == null) {
            listObject = new ArrayList<Object[]>();
            Object[] obj1 = { "Example_Bar_1", "Series_1", 73.0 };
            Object[] obj2 = { "Example_Bar_2", "Series_1", 100.0 };
            Object[] obj3 = { "Example_Bar_3", "Series_1", 30.0 };
            Object[] obj4 = { "Example_Bar_4", "Series_1", 40.0 };
            listObject.add(obj1);
            listObject.add(obj2);
            listObject.add(obj3);
            listObject.add(obj4);
        }
        return listObject;
    }

Here i have created four bar and all are belong to same series.

"Example_Bar_1", "Series_1", 73.0 :-
 i)it is x axis value
ii)it is series name (here only one series is present and that is Series_1)
iii)it is data point value or y axis value which always be double.

Because they all belong to same series therefore they have same color for their bar.Although you can give different value in this case bar graph color will changed.

With same series value


With different value



4-Binding this variable to the UI Bar Graph component of the UI

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
        xmlns:dvt="http://xmlns.oracle.com/dss/adf/faces">
    <af:document title="barPage.jsf" id="d1">
        <af:form id="f1">
            <dvt:barGraph id="graph1" subType="BAR_VERT_CLUST" tabularData="#{barBackingBean.listObject}" shortDesc="example">
                <dvt:background>
                    <dvt:specialEffects/>
                </dvt:background>
                <dvt:graphPlotArea/>
                <dvt:seriesSet>
                    <dvt:series/>
                </dvt:seriesSet>
                <dvt:o1Axis/>
                <dvt:y1Axis/>
                <dvt:legendArea automaticPlacement="AP_NEVER"/>
            </dvt:barGraph>
        </af:form>
    </af:document>
</f:view>

In next post i will create the bar graph using GraphDataModel object.


Link :http://docs.oracle.com/cd/E12839_01/apirefs.1111/e12418/tagdoc/dvt_barGraph.html

Download sample Application :

https://docs.google.com/file/d/0B8cP4jZuxLlXVzZpRHdVU2hvSnc/edit?usp=sharing



No comments:

Post a Comment