Skip to main content

An example of clickListener implementation for <dvt:barGraph>

In this post I'm sharing an interactive bar graph example built using <dvt:barGraph> and a clickListener for the graph component. The basic <dvt:barGraph> used in this example is built using the same approach as suggested by Frank in his ADF Code Corner sample #17. So, I'm not repeating those steps(for building graph using ViewObject) in this post.

Use Case

This example displays a bar graph of total salary for each department. Please see the following picture - Departments are plotted on X-axis and Salary on Y-axis

When user clicks on a 'Bar', he/she is presented with popup window to edit the data used for building the Bar. On closing the popup, graph gets refreshed to reflect the modified data

A glance at the implementation

The <dvt:barGraph> supports listener interface for receiving click events on the graph components. This example is built based on this concept. The clickListener gets triggered when user clicks on the bars of the graph, and the listener method implementation for this example in turn displays the 'edit popup' window with data used for building the bar. In a nutshell, the clickListener method used in this example does the following
1. Gets the group attribute(department name) using the ClickEvent payload
2. Fires a query using the department name and populates the VO
3. Displays the data from step 2 in an edit popup window

I'm copying the relevant code snippet below for your reference.

<dvt:barGraph id="barGraph1"
clickListener="#{TestBean.clickAction}" ...

* Method to handle ClickEvent on the Graph. This method does the following
*  1. Gets the group attribute
*  2. Fire a query using the group attribute param and populates the VO 
*  3. Displays the data from step 2 in an edit popup window
* @param clickEvent
public void clickAction(ClickEvent clickEvent) {
  ComponentHandle handle = clickEvent.getComponentHandle();
  String deptName = null;
  if (handle instanceof DataComponentHandle) {
    DataComponentHandle dhandle = (DataComponentHandle)handle;
    // Get the group attributes
    Attributes[] groupInfo = dhandle.getGroupAttributes();
    if (groupInfo != null) {
      for (Attributes attrs : groupInfo) {
        deptName =
  BindingContext bc = BindingContext.getCurrent();
  DCBindingContainer dcb =
  OperationBinding opb =
  opb.getParamsMap().put("deptName", deptName);

Please note that this example has a dialogListener added for the above mentioned edit popup, which is responsible for re-executing the iterator and refreshing the graph component to reflect the changes done by the user.

You can download the sample workspace from here.
[Runs with Oracle JDeveloper 11g R1 PS2 + HR Schema]


Dinesh said…
Hi Jobinesh,

Can you please tell me whether dvt:graph work in Internet Explorer 9 when developed in jdeveloper

Anonymous said…
Hi Jobinesh,

Not entirely related to this post but...

Is it possible in ADF Faces DVT to drag the bar chart value up and down to increase/decrease its value?

I somehow need that functionality and I wanted to know if you are aware of this?

vinay.polisetti said…
Hi Jobinesh, Thanks for the post. Can you please also let us know the appropriate import statements.

You can find it in the sample attached in this post
Anonymous said…
I want diplay date dynamically in single BarGraph from multplie VO . how can we achiew this.

Nischal Sanghal said…
I had the dvt chart inside an iterator (using tree model) and was having problems showing drill down tabular data besides the chart.
Used this approach to show details in a popup instead.
Thanks much!

Popular posts from this blog

How to set Bind Variable Values at runtime ?

In this post I'm sharing a couple of approaches for programmatically setting bind variables values at run time. This post is an attempt to explain 'When to use what ?'[ In case if you are familiar with 'Bind Variables' in ADF BC, please refer Section 5.10, Working with Bind Variables in Fusion Developer's Guide ]

1. Set the Bind Variable value using RowSet::setNamedWhereClauseParam(...)

You can use use the setNamedWhereClauseParam(...) method on the ViewObject interface (which extends oracle.jbo.RowSet) to set the value for bind variables. Please note this sets the value on default RowSet. In other words, this doesn't have any effect on the secondary RowSets that you/system generates.
ViewObject vo = am.findViewObject("EmployeesView1"); vo.setNamedWhereClauseParam("bindVarDeptId", new Number(10)); vo.executeQuery();
2. Set the Bind Variable value using ViewObject's VariableValueManager::setVariableValue(...)

VariableValueManager Ma…