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.
2-create the setter and getter of the same attribute
3-In the getter method we need to put series value which will render bar in the bar graph or graph chart.
"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
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
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;
}
}
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.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;
}
"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>
<!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
can you please tell me how to create bar graph programatically in 12c. Thanks in advance...
ReplyDeleteIn 12c, bar chart didnt work for me programmatically. However I copied the same code as shared about barGraph and it worked in 12c too.
Delete