Monday Aug 24, 2015

New Data Visualizations Features in JDeveloper

A recent release of JDeveloper has brought to us the following new Data Visualization features:

New Component: NBox

NBox is used to visualize and compare data across two dimensions. It is commonly used to visualize and compare employee performance. New design time for NBox is also now available.

New Chart Types

In addition to the new charting solution that was previously introduced in 12.1.3, in we are introducing the new Funnel chart to replace the Funnel graph, and polar coordinate system is also now supported by several chart types.

Funnel charts are used to visually represents data related to steps in a process. The steps appear as vertical slices across a vertical or horizontal cone-shaped section. As the actual value for a given step or slice approaches the quota for that slice, the slice fills. Typically, a funnel chart requires actual values and target values against a stage value, which might be time. For example, use the funnel chart to watch a process where the different sections of the funnel represent different stages in the sales cycle.

Polar coordinate system: Several Chart types now support a new coordinateSystem attribute that specifies if the chart uses Cartesian or Polar coordinates.

A polar chart has a radial y-axis and a tangential x-axis. Polar coordinate system can be used for bar, line, area, combination, scatter, and bubble charts. Polygonal grid shape (commonly known as "radar") is supported for polar line and area charts.

  • Polar charts are recommended for directional data. (e.g. air drag vs. boat angle)

  • Polar charts are also recommended for categorical data where all categories are equally important. (e.g performance appraisal categories)

Below are examples of Polar Bar and Polar Line Charts. Polar line has a polygonal shape grid also known as radar chart:

Polar Area chart:

Polar Scatter and Bubble Charts:

Thematic Map Backport

Previously only available in 11.1.2.x and 12.1.3 releases, Thematic map has now also been backported to

Design Time Features

Design time for NBox, Diagram, Thematic Map and the new Charts is now available in JDeveloper.

NBox design time:

Diagram design time:

Detailed step-by-step instructions on using the design time are available in the Oracle Fusion Developer's Guide chapter on Creating Databound Data Visualization Components.
Test it out and report back on your experience!

Thursday Mar 19, 2015

Data Visualizations at Visualizing Information Design Jam

Oracle Data Visualizations were featured in a great Oracle event organized by Laurie Pattison and our colleagues at the AppsUX innovation team:

The goal of this event was to bring together different teams within Oracle, and with a lot of help and guidance from the UX team, think about how to make our product more visually engaging and come up with ideas for new visualizations.

In preparation for this event we did several training sessions, one of which was my presentation on what are the opportunities to use data visualizations and how to choose your visualization techniques.

Laurie did a great session on the process for designing a data visualization, starting with thinking about who your users are and what are the business problems they are trying to address. Read her blog post A Data Visualization Design Approach on this topic at the Apps UX Innovation Events blog.

Donna Scheele presented on how to create visually engaging UIs using Alta concepts and also blogged about this topic on the Middleware UX blog.

16 teams across Fusion Apps, Middleware and Database participated in the event. All teams came prepared with a business problem they were trying to solve in the form of an elevator pitch.  Mentors were available to work with teams in advance to solidify the pitch into something actionable that could be reasonably be accomplished in less than two days. Given that they only had 3 minutes to present at the end of the jam, both mentors and judges reviewed the pitches in detail in advance for the appropriate context.
The design jam started with a design workshop given by visual design and data visualization experts in AppsUX, John Cartan and Julia Blyumen. After this 3 hour workshop, the participants were ready to start designing, and they only had a little more than a day to come up with their new design.

To find out more about the event and the winning designs, read this report on the event by Laurie Pattison on the Apps UX Innovation Events Blog.


Mentors (from left to right): Julia Blyumen, Katy Massucco, John Cartan, from AppsUX, me (Katia Obradovic-Sarkic, DVT), Laurie Pattison (blog), Erika Webb (AppsUX), Soraya Younossi, Donna Scheele (blog) from Middleware UX, Serguei Orozco, Mindi Cummins (AppsUX).

The Visualizing Information Design Jam was a great success and many teams came up with new designs that we will hopefully see in the Oracle products soon. 

Friday Feb 27, 2015

Charts Tips: Zoom and Scroll with the Overview Window, Colors using Attribute Groups

The new Charts introduced in ADF 12.1.3 and MAF 2.0.x offer superior performance and user experience, including:

  • Client-side layout and interactivity
  • Redesigned zoom and scroll
  • Marquee zoom and selection
  • Redesigned Time axis
  • Improved data labeling

chart zooming and scrolling

Did you know how to turn on the overview window for zooming and scrolling, like shown in the image above?

Let's take you through some simple steps to enable zooming and scrolling and the overview window.

Assuming you created a simple bar chart displaying employee salaries, to enable zooming and scrolling, in the Property Inspector under the Behavior section, set the zoomAndScroll to live.

bar properties

Setting the zoomAndScroll property to "live" enables scrolling on the Chart using a thin scrollbar, but does not enable the full overview window.

To enable the display of the overview window, you need to insert the overview facet on the Chart:

Next, insert the dvt:overview tag into the overview facet:

Run the page and test your new zoom and scroll overview window:

bar zoom and scroll

If you would like to make the bar colors alternate using the built-in Alta color styles, insert the dvt:attributeGroups tag and set the type to color.

<dvt:attributeGroups id="ag1" type="color" value="#{row.LastName}" />

The attribute groups value varies by row.lastName, which means that each bar displaying employee salaries by last name will be rendered in different color:

Our employee salary chart is now displayed with a set of built-in Alta colors and with the zooming and scrolling overview window enabled.

Monday Jan 12, 2015

WorkBetter Alta Sample Now Available!

The Oracle ADF team is happy to announce the release of the Oracle Alta WorkBetter ADF application sample, which demonstrates best practices in applying Oracle Alta UI design patterns.

The WorkBetter sample demonstrates how to use many Data Visualization components such as: Charts, Gauges, Geomap, Treemap, Sunburst, and Timeline. It also contains code samples for how to implement interactivity with Data Visualization components, for example how to use selection on the bar chart to navigate to a new page.

You can now download the complete source code for this sample application, so you can further learn how to develop cool user interfaces with Oracle ADF Faces that implement the Oracle Alta UI design patterns.

The image below shows how a small form factor Treemap is used inside the ListView rows to visualize employee compensation.

Work Better Treemap

The latest version of the WorkBetter demo application is hosted here so you can play with it.

Please send us your feedback and post any questions on this blog!

Friday Jan 09, 2015

A Guide to Diagram – Part 11 - Selected Node Information

A short article in the diagram series showing how you can obtain information about the node that a user has just clicked on in your event handlers.[Read More]

Wednesday Nov 26, 2014

A Guide to Diagram – Part 10 - Inter-Group Links

This article continues the diagram series with a focus on the advanced topic of routing cross container links in your diagrams[Read More]

Friday Oct 17, 2014

Controlling Your Diagram Viewport

When you start to build your own diagrams you may be wondering how to control the "initial" view of the diagram inside of the component.  By default, the initial view that you see will be sized correctly to see the entirety of the diagram - all nodes will be visible.  However, what if you need more control? Well there are two approaches you can take, the first a simple declarative approach and the second which involves your layout code. 

Looking at the simple approach first.  If you look at the diagramNodes component you will see a property called centerRowKey. This property can be set to an EL expression which needs to evaluate to the rowKey of the node that you want to center on - typically you can use this in combination with node selection (see: Guide to Diagram Part 11- Selected Node Information) to allow a user to re-focus the diagram to the clicked node.  

 Need More Control?

Now centerRowKey is perfectly suitable for most situations, however, what if you need more control?  An example of this might be where you want to start the view of the diagram off in a zoomed state - just focusing on a particular subset of nodes for example. 

Fortunately there are a  couple of JavaScript APIs that you can call from your layout code that come in handy here. 

  1. The getComponentSize() function on the layoutContext.  This returns a DvtDiagramRectangle object which encodes the base width and the height of the diagram component. Note, however, that the logical size of the diagram may be smaller / different from this depending on it's shape relative to the  component
  2. The setViewport( DvtDiagramRectangle) function, also on the layoutContext.

 Both of these use DvtDiagramRectangle which is an object with the properties .x,.y,.w and .h, you can hopefully guess what each of those properties holds! A new DvyDiagramRectangle object can be created using the code:

var vp = new DvtDiagramRectangle(xpos, ypos,  width, height) 

For the task in hand, the setViewport() function is what we are interested in. You can think of it as drawing a scaled rectangle over the entirety of the diagram. If you proportionally reduce the size of the viewport then that will zoom in on the diagram. So you use the width and height attributes of the DvtDiagramRectangle that you pass to control the scaling, and then the x and y position to place the zoomed viewport relative to the base diagram. 

For example - lets say I want to zoom into the centre of a diagram that is defined as  a rectangle diagRect, I would use:

layoutContext.setViewport(new DvtDiagramRectangle((diagRec.w/4),

Alternatively the following would apply the same zoom level but show the top left hand quadrant of the diagram:

layoutContext.setViewport(new DvtDiagramRectangle((diagRec.w/2),

The one thing to watch out for here is not to assume that the  rectangle returned by getComponentSize is actually the size of your diagram, it is not.  It provides the basic size in pixels of the physical diagram component.  The diagram (nodes and links) itself is sized based on your layout and then scaled to provide a best fit in the available space in that physical component. Accordingly if you want to set the viewport, it pays to keep track of how wide and high your diagram actually grows to as you add nodes and links.  You can then work out the scaling factor that will have to be used to "fit" that into the physical component and then you will have the information that you need to manipulate the view port.

Data Visualizations at Oracle OpenWorld 2014

This year at OpenWorld the Oracle Data Visualizations had a strong representation with two DVT focused sessions, two hands-on labs, and our visualizations featured across the board in Thomas Kurian's keynote, Chris Tonas' general session, several MAF sessions, and a number of sessions that featured DVT in our internal customer products. We also had a strong presence from the DVT development team with Hugh Zhang, Amy Dai, and Jairam Ramanathan who did a great job co-presenting with Duncan Mills and myself on our two DVT sessions.

Oracle Alta UI

One of the most exciting announcements from our point of view was the launch of Oracle Alta UI in Chris Tonas's General Session: Next-Generation Application Development—The Mobile and Cloud Effect.

Oracle Alta UI is not just a new skin, it is a new approach for designing modern UIs for Mobile, Cloud and Web applications. The key points of Oracle Alta UI are: designing for mobile platforms first, responsive layout, and clean and simplified look that emphasizes key information using Data Visualizations.

Oracle Alta UI resources are now available at We published a set of design patterns and provided demos based on an HR scenario called WorkBetter demo for Mobile Application Framework and ADF. Our ADF Faces WorkBetter demo is hosted here.

Work Better iPad

Here are photos of our VP Chris Tonas demoing the WorkBetter Faces application, a showcase app for the new Oracle Alta UI.

WorkBetter demo 1

WorkBetter demo 2

In the photos below, our VP Chris Tonas is demonstrating the responsive layout features by resizing the browser which causes our page layout to switch from horizontal to vertical. The Info Tiles switch to display in a vertical column and the DVT Timeline switches its display to vertical. 

WorkBetter demo 3

Work Better demo 4

DVT Focused Sessions

On Monday Jairam and Duncan presented a session titled Diagram-Based UIs in Oracle ADF: A Giant Leap Forward, featuring a lot of great Diagram demos and sample code, including a new demo on how to progressively build a Sankey diagram by Jairam. We had more than  80 customers attending this session, and a lot of interest after the session.

Sankey Diagram

Our general DVT session:  The Picture That Paints a Thousand Words: Data Visualization on Web and Mobile was on Wednesday, presented by Hugh Zhang, Amy Dai, and myself. We had very good attendance with 78 people in the audience. We started with an overview of DVT components, relationship with Oracle Alta UI, use cases and internal customers, including demos Election Across Components and Election Across Time.

I then introduced and gave demos of the new components: Diagram and NBox.

Hugh then took over giving an overview of our new Charting solution, demos of the upcoming Chart features and roadmap.

Amy took over to present the latest features in Thematic Map, and then demoed some of our upcoming features, including DVT mashups, to a great delight by the audience.

We concluded by pointing the customers to our collateral, DVT blog, WorkBetter app samples and hands-on labs which were scheduled after our session.

Related Sessions

It was fortunate that our session was scheduled right after Laura Akel (PM) and Richard Wright (UX)'s session: Modern UI Design: Implementing Oracle’s Best Practices in Your Applications which focused on the Oracle Alta UI and implementation of the WorkBetter Alta sample in ADF Faces. That session was standing room only and there was a lot of interest from customers in the new Oracle Alta UI and related sample applications.

Another great session for Data Visualizations was Building Performant Mobile Apps with Amazing UIs, Using Oracle Mobile Application Framework, presented by our PM Director Denis Tyrell and MAF PM Srini Indla on Wednesday afternoon. This session covered tips and tricks and best practices for building highly performant mobile apps with really cool UIs, using Oracle Mobile Application Framework and featured some examples from the Work Better demo for MAF.

DVT hands-on labs  Developing Web and Mobile Dashboards with Oracle ADF were hosted by Frank Nimphius and myself in two time slots and were very well attended. Attendees learned how to create a dashboard page with ADF Faces, create a chart, change the bar colors and turn on zooming and scrolling via overview window, then create a circular status meter gauge, sunburst, Hierarchy Viewer, and Thematic Map. If you attended one of our labs and did not get to finish it, you can download the materials here.

You can download the slides for of all our ADF and MAF sessions at OOW here. To find the slides, click on the session you are interested in and look under "Presentation Download".

Drop us a note if you have any questions about Oracle Data Visualizations at OOW and we hope to see you next year!

Friday Sep 26, 2014

Come Meet us at OpenWorld!

If you are at Oracle OpenWorld this year, come to our Data Visualizations sessions!

This year we have two great sessions for Oracle Data Visualizations:

1. CON2057 - Diagram based UIs in ADF - A Giant Leap Forward (Monday September 29th, 2:45pm)

Come to learn more about Diagram from the experts, and learn how to build a Sankey Diagram!

Presenters: Duncan Mills and Jairam Ramanathan

Sankey Diagram

2. CON2344 - The Picture That Paints a Thousand Words: Data Visualization on Web and Mobile (Wednesday October 1st, 11:30am)

Come to see the latest and coolest DVT demos, roadmap, and a glimpse of the future functionality!

Presenters: Hugh Zhang, Amy Dai, and Katia Obradovic-Sarkic

Election Across Components

We also offer two hands-on labs focused on Oracle Data Visualizations:

HOL9274 - Developing Web and Mobile Dashboards with Oracle ADF (offered twice, Wed 1:15pm, Thu 1pm)

In the hands-on lab, learn to build a dashboard that includes a Chart with zooming and scrolling, groups formatted to show built in colors, a circular status meter Gauge, a Sunburst, Hierarchy Viewer, and Thematic Map.

We hope to meet you there!

Tuesday Aug 19, 2014

New Video on DVT Chart Formatting Now Avalaible

A new video on how to create and format DVT Charts is now available on Oracle Technology Network. This video goes through the steps of creating a bar chart with an overview window, a pie chart, and a line chart. It shows how to turn on the Time Axis, format the bar charts to display different colors by group, and how to explode pie slices. Watch the video here.

charts formatting video

Monday Jul 14, 2014

A Guide to Diagram – Part 9 – Attribute Groups and Node Stacking

In this article in the diagram series we look at how nodes can be filtered and stacked using the attributeGroups tag and the diagram legend.[Read More]

Thursday Jul 10, 2014

A Guide to Diagram – Part 8 – Diagram Container Groups

In this article we look at how hierachical data can be displayed on diagram using expandable containers.[Read More]

Wednesday Jul 09, 2014

Videos on New Features in Data Visualizations now available on Oracle Technology Network

Check out the latest videos on Oracle Technology Network, including these new videos about Oracle Data Visualizations:

  • Overview of the new features in Data Visualizations 12.1.3 (video)
  • Diagram Layout Tutorial (video)

new features video

new features: chart zoom and scroll

More videos are coming soon at JDeveloper 12c Online Demonstrations OTN page.

Tuesday Jul 08, 2014

A Guide to Diagram – Part 7 – Configurable Layouts

This article shows how you can make your diagrams more flexible and reusable using layout parameters[Read More]

Monday Jul 07, 2014

A Guide to Diagram – Part 6 – Advanced Links

This article covers how links can be enhanced including rotated labels and how they can be coerced into paths other than straight lines.[Read More]

Oracle Data Visualizations provide a broad range of beautiful, interactive components for viewing and understanding data. This blog covers topics on the new features in Oracle Data Visualization components and how-to articles on advanced functionality.


« October 2015