Bar Grpah-3 (Series Set and Alert Set)

Hi

Agenda:In this post  i would like to explain how we can programmatically create series set and alert set in bar and horizontal bar graph.

Explanation about Series Set and Series tag :

Tag is :<dvt:series> and <dvt:seriesSet>

<dvt:series> is for giving or changing information for single bar at a time
<dvt:seriesSet> is for giving or changing information all bar which are present in the bar graph.
It has a lot of attribute which will apply in all bar graph.

Series set is use for changing color ,space and other property of the bar in bar graph.<dvt:series> tag is good only if you know how may bar are generated at run time.And also if you have 10-20 series then in this case also you have to put same number of tag into UI source code which is tedious.

 <dvt:seriesSet> has one attribute SeriesMap where we can pass the value series and it will generate different type of series at run time.

Code are following for creating series map. It map contains key as Integer and value as a object of the Series.Here i am just changing color of one series but you can also change other property.

Here i am changing color of the first series to green therefore i passed 0 as key in map.

    private Map<Integer,Series>  seriesMap;
    public void setSeriesMap(Map<Integer, Series> seriesMap) {
        this.seriesMap = seriesMap;
    }

    public Map<Integer, Series> getSeriesMap() {
        if(seriesMap==null){
            seriesMap=new HashMap<Integer,Series>();
            Series s1=new Series();
            s1.setColor(Color.GREEN);
            seriesMap.put(0, s1);
        }
        return seriesMap;
    }

Explanation about Alerts Set and Alert tag :

Tag :<dvt:alert> and <dvt:alertSet>

This tag are use to show waring and error in bar chart.<dvt:alert> is for showing single bar warning  and error where else <dvt:alertSet> contians information of bars at a same time.

So here i am putting warning image in first bar which has Example_Bar_1 as column value.

    public void setAlertSet(Map<Integer, Alert> alertMap) {
        this.alertMap = alertMap;
    }

    public Map<Integer, Alert> getAlertSet() {
        String text = "Example_Bar_1";
        alertMap = new HashMap();
        Alert al1 = new Alert();
        al1.setXValue(text);
        al1.setYValue(80.00);
        al1.setImageSource("/images/warningIcon.png");
        alertMap.put(0, al1);
        return alertMap;
    }

i have put image under images folder.

Download sample application at following location

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

Thanks
Prateek

Bar Graph -2

Hi

In my last post i have given example for creating model of bar graph by passing value in tabular data.In this post i will create the model of graph by using LocalXMLDataSource and GraphDataModel.Then pass the value in the value property of bar graph.

Explanation is following

1-First defined variable  in backing bean

private GraphDataModel graphDataModel;

2-Created setter and getter of above variable

    public void setGraphDataModel(GraphDataModel graphDataModel) {
        this.graphDataModel = graphDataModel;
    }

    public GraphDataModel getGraphDataModel() {
               return graphDataModel;
    }

3-Whole code of backing bean is following.In getter method i have created object of LocalXMLDataSource then set into GraphDataMode object .

package com.example.oracle.backingbean;

import oracle.adf.view.faces.bi.model.GraphDataModel;

import oracle.dss.dataView.LocalXMLDataSource;

public class BarGraphBackingBean {
    public BarGraphBackingBean() {
        super();
    }

    private GraphDataModel graphDataModel;

    public void setGraphDataModel(GraphDataModel graphDataModel) {
        this.graphDataModel = graphDataModel;
    }

    public GraphDataModel getGraphDataModel() {
        if (graphDataModel == null) {
            graphDataModel = new GraphDataModel();
            LocalXMLDataSource ds = new LocalXMLDataSource(columnsValue(), seriesValue(), dataPoint());
            graphDataModel.setDataSource(ds);
        }
        return graphDataModel;
    }

    public String[] seriesValue() {
        String[] seriesLabels = { "Series_1", "Series_2", "Series_3"};
        return seriesLabels;
    }

    public String[] columnsValue() {
        String[] columnLabels = { "Column_1","Column_2" };
        return columnLabels;
    }

    public Object[][] dataPoint() {
        Object[][] dataPoint = new Object[2][3];
        dataPoint[0][0] = new Double(10);
        dataPoint[0][1] = new Double(20);
        dataPoint[0][2] = new Double(30);
        dataPoint[1][0] = new Double(40);
        dataPoint[1][1] = new Double(50);
        dataPoint[1][2] = new Double(60);
        return dataPoint;
    }
}

*Two column
*Three Series
*And each column has three data point value.

Step 4:Page code is following

<?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="barGraphPage.jsf" id="d1">
        <af:form id="f1">
            <dvt:barGraph id="graph1" subType="BAR_VERT_CLUST" value="#{barGraphBackingBean.graphDataModel}">
                <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>


Here i have created two column and each column has contains 3 series.
Running page screen is following

Code is present at following location

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

Thanks,
Prateek

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