Saturday, July 12, 2014

ADF 12c (12.1.3) Line Chart Overview Feature

ADF 12c (12.1.3) is shipped with completely rewritten DVT components, there are no graphs anymore - they are called charts now. But there are much more, besides only a name change. Previous DVT components are still running fine, but JDeveloper wizards are not supporting them anymore. You should check ADF 12c (12.1.3) developer guide for more details, in this post I will focus on line chart overview feature. You should keep in mind, new DVT chart components do not work well with Google Chrome v.35 browser (supposed to be fixed in Google Chrome v.36) - check JDeveloper 12c (12.1.3) release notes.

Sample application - ADF12DvtApp.zip, is based on Employees data and displays line chart for the employee salary, based on his job. Two additional lines are displayed for maximum and minimum job salaries:


Line chart is configured with zooming and overview support. User can change overview window and zoom into specific area:


This helps a lot to analyse charts with large number of data points on X axis. User can zoom into peaks and analyse data range:


One important hint about new DVT charts - components should stretch automatically. Keep in mind -parent component (surrounding DVT chart) should be stretchable. As you can see, I have set type = 'stretch' for panel box, surrounding line chart:


Previous DVT graphs had special binding elements in Page Definition, new DVT charts are using regular table bindings - nothing extra:


Line chart in the sample application is configured with zooming and scrolling (there are different modes available - live, on demand with delay):


Overview feature is quite simple to enable - it is enough to add DVT overview tag to the line chart, and it works:

11 comments:

Stephen Furlong said...

Cool article. Thx for posting. Where can we get the Chart components. I don't see them in the standard 12.1.3 install or available in the update extensions. Thx

Andrej Baranovskij said...

Charts are available out of the box, just drag and drop any VO from Data Control and select Charts section from the menu.

Andrejus

Anonymous said...

Hi Andrejus

Once again you are giving great information here...

Do you happen to know if the Chart components are considered a part of the ADF Essentials ?

i.e. Do we need weblogic to run them, or they can be used in glassfish also?

Thks

Andrej Baranovskij said...

Hi,

I'm not sure about Glassfish, but I would assume should be available. The best would be to run a test, if it works - means available.

Regards,
Andrejus

Anuj said...

When we hover around any graph component, tool tip is displayed. I want to format number in that tool tip. Any idea on how can we do that in ADF 12.1.3?

Krishna Kumar said...

Hi,
I am looking for a drillable option as with dvt:bargraph in dvt:barchart, barchart is introduced since 12c, chart components replaces the graph components in palette.
Also the chart components do not make use of the graph model.
Please let me know if there is a way to achieve drillable charts.
Thanks in advance.

Charanjeet said...

is there any way to get this features in ADF 11 versions ? What is the minimum version of ADF which support this feature?

Andrej Baranovskij said...

It could work in 11.1.1.9, you should check.

Regards,
Andrejus

Andrej Baranovskij said...

Yes, they have renamed component names - check docs.

Andrejus

Abhi said...

Hi Andrejus,

Nice post.

Just a query i have, I implemented the same and got it working but I am not able to see the x-axis value below the dvt:overview part. Did I miss something or is some code i got to add.

Thanks again for awesome post,
Abhi

Unknown said...

Hi Andrejus,
Excellent post.
I have a small question. Can we implement the zoom feature in scatter graph. There is a solution available for scatter chart but we have extensively used scatter graph. Can you give me few inputs on how to implement zoomListener?

Thanks,
Bharath