Wednesday Nov 25, 2015

Chart Tips: Coloring by Group and Displaying Attribute Groups in the Legend

This article talks about how to color the chart data by group using attribute groups, how to display the attribute group colors in the chart legend, and how to hide the axis tick labels.[Read More]

Monday Nov 02, 2015

Oracle OpenWorld 2015: JET and Data Visualizations

There were many great sessions and announcements at Oracle OpenWorld 2015, but for me the most exciting was the announcement of Oracle Javascript Extension Toolkit (JET). Oracle JET is our new development framework, targeted at intermediate to advanced JavaScript developers working on client-side applications. It's a collection of open source JavaScript libraries along with a set of Oracle contributed JavaScript libraries that make it as simple and efficient as possible to build applications that consume and interact with Oracle products and services, especially Oracle Cloud Services.

JET was formally announced by our VP Chris Tonas in his general session: Revolutionizing Application Development with Oracle Cloud on Tuesday, October 27th.

Chris showed how a business user ("citizen developer") can use Oracle Application Builder Cloud Service to connect to data from Oracle Sales Cloud and develop a custom application without writing any code. He talked about how this application can then further be extended by developing a custom component in JET using Developer Cloud. For this session we developed a demo in JET using our Data Visualization components to show a sales forecasting scenario. Brian Fry (ABCS and Tools PM) showed how a developer can edit code in Developer Cloud, and then Chris showed how to bring this custom forecasting UI back into Application Builder Cloud Service.

Chris explained how with the introduction of JET we now provide the right technology for the right person:

There were several great sessions focused solely on JET by JET PM John Brock (JB) and Netbeans/JET PM Geertjan Wielenga. I attended their session on Wednesday: Embracing JavaScript: Experience the New Oracle JavaScript Extension Toolkit [CON8091] in which JB gave an overview of JET and showed all the great collateral that is now available on the JET website, including an overview of the JET cookbook and how to use it to learn to code in JET.

Geertjan showed a great demo of Oracle JET plugin for Netbeans, which he also described in this blog article.

Another session that was nicely attended was Oracle Alta UI Design: Implementing Oracle’s Best Practices in Your Applications [CON8296] presented by Laura Akel (Alta/ADF/MAX PM) and Richard Wright (UX). Laura and Richard explained how the Alta UI is the unifying theme across our UI frameworks: ADF, JET, and MAF. Laura gave a great demo of our sample WorkBetter application that was designed and built to showcase the Oracle Alta UI. She showed the latest features in MAF 2.2.0, ADF 12.2.1 and JET v1.1.2. Richard talked about the updated Oracle Alta UI site, the Alta guidelines, and the key principles of implementing an Alta UI.

Our data visualization session: Creating Stunning, Mobile-First User Interfaces with Oracle Data Visualizations [CON8185] that was presented by Hugh Zhang, Jairam Ramanathan (JET/DVT development managers) and myself was also heavily focused on JET. We started by giving an introduction to JET and showing the forecasting demo from Chris Tonas's general session in more detail.

Jairam Ramanathan (JET/DVT development manager) showed a new demo which we called Data Visualization Explorer. He used a data set about popular programming languages that Chris also talked about in his general session, and a data set about basketball, which tied well into Thomas Kurian's keynote.
He talked about the importance of choosing the right visualization, sharing colors across components, and mentioned how new Oracle Data Visualizations Cloud Service (announced during Larry Ellison's and Thomas Kurian's keynotes) uses our data visualization and the JET framework, which is also the case with the latest Enterprise Manager Cloud services.
Jairam than handed over to Hugh Zhang (JET/DVT development manager), who showed how to get started with JET quick start template. He showed first how to write a simpler example in JET with a gauge and two-way binding, and then showed how to set up associated views with highlighting. Hugh then showed the JET website and data visualization examples in the JET cookbook, and how one can change the code in cookbook examples and see the changes right away.

We concluded our session by talking about the new Data Visualizations features in ADF 12.2.1 and MAF 2.2.0. which were just released, and how we can now easily expose functionality across development frameworks because we have a shared layer in Oracle Data Visualizations.

Hands-On Labs

JB and Geertjan held two hands-on labs: Getting Started with Oracle JavaScript Extension Toolkit, which were both full. The hands-on lab script teaches you how to get started with Oracle JET using NetBeans IDE 8.1. The full script for the hands-on labs is available on the JET website here.

Development Tools PMs Shay Shmeltzer, Laura Akel, and I held a hands-on lab titled Build Responsive Web Applications with Oracle ADF [HOL10380], which focused on using the new masonry layout and data visualization features in ADF 12.2.1. This lab was also very well attended and we received many requests for the script.


We had many customers visit us at the demogrounds for Application Development Framework, Mobile Application Framework, and JET that were next to each other. JET booth had a lot of interest, and we had great representation at the booth by JET development (Amy Dai, Jairam and Hugh) along with our PM team. Below is a photo of John Brock (JB) JET PM and Katarina Obradovic-Sarkic (author of this post) at the JET demogrounds booth.

Laura Akel (Alta/ADF/MAX PM) talking to Oracle Ace Director Lucas Jellema of AMIS at the ADF Faces booth:

On one end of the Moscone South demogrounds there were showcase booths, which were an even better way to present to customers. Here is a photo of Denis Tyrell, Mobile and Tools PM Director, demoing how to build an application with Mobile Application Accelerator (MAX), part of the Mobile Cloud Service (not yet released) at the Mobile Showcase booth:

Leave us a comment if you are looking for any materials that we presented at OpenWorld and hope to see you again next year!

Friday Oct 23, 2015

New Data Visualization Features in JDeveloper and ADF 12.2.1

JDeveloper and ADF 12.2.1 is now available for download on Oracle Technology Network. The following new features have been introduced in the UI layer:

  • Alta Skin is now enabled by default in all the ADF Faces and Data Visualization components. Alta skin is an essential component of the new Oracle Alta UI design system. For more information on Oracle Alta UI please refer to the newly redesigned Alta design patterns website.
  • Masonry Layout is a new layout that displays its contents in a grid, like a dashboard. It can take any ADF Faces component as a child, respectively called a tile. Tiles can span columns and rows. When the UI is provided, users can insert, delete, reorder and resize the tiles. When the available display space changes, the masonry layout rearranges the tiles to fit into the new display size.

  • New Data Visualization Component: NBox is used to visualize and compare data across two dimensions. It is commonly used to visualize and compare employee performance. A new data-binding dialog at design time for the NBox component is also available.

  • Pie Chart Enhancements:The innerRadius attribute on the Pie Chart lets the users create a "donut" chart look. There are also new attributes to control pie slice gaps, label positioning, and using pie slice explosion as a selection effect.

  • Funnel Chart has replaced a now deprecated Funnel Graph. Funnel charts are typically used to visualize a process where the different sections of the funnel represent different stages in the process, for example stages in a 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:

  •  Here are examples of scatter and bubble polar charts:

  • Thematic Map - Map Provider feature allows Thematic Map to be configured to retrieve geographic data from any data source through the MapProvider APIs, including Oracle eLocation services.The MapProvider APIs  allow the custom basemap to be configured and treated like a built-in basemap with all the same functionality including drilling, short/long labels, custom region supprt, pointLocation projections, etc.

  • New Charting Design Time UI provides the ability for an end user to view a dynamic chart sample while binding data to various sections of the chart.
  • New NBox design time is now available:

  • The Diagram visualization, available since 12.1.3 release, now has support for design-time creation and data-binding:

You can read about other new features in JDeveloper and key themes for the release in this post by Shay Shmeltzer and the New Features document, and play with the ADF Faces Rich Client demo to learn more about the new features in ADF Faces and Data Visualization components.

Thursday Oct 22, 2015

Visit Us at OpenWorld 2015!

If you are coming to Oracle OpenWorld and JavaOne this year, here is a list of sessions and hands-on labs related to Data Visualization in our frameworks and tools that we don't want you to miss.

OpenWorld Conference Sessions

General Session: Revolutionizing Application Development with Oracle Cloud [GEN9500] is going to be presented by our VP Chris Tonas on Tuesday at 11am in Moscone South - 103.

The following Conference Sessions are all going to be in Moscone South:

  • Oracle Alta UI Design: Implementing Oracle’s Best Practices in Your Applications [CON8296], Monday, 1:30pm, Room 274
  • Don’t Develop—Compose Your Mobile Applications Easily with Oracle Mobile Cloud Service [CON9489], Tuesday, 4pm, Room 270
  • Next-Generation JavaScript, REST, and HTML5 Development with Oracle [CON8469], Tuesday 4pm, Room 304
  • Meet the Experts: Oracle’s Development Tools and Frameworks [MTE10022], Tuesday, 6pm, Room 300
  • Embracing JavaScript: Experience the New Oracle JavaScript Extension Toolkit [CON8091], Wednesday, 12:15pm, Room 304

Our session below has Data Visualization as the primary focus:

  • Creating Stunning, Mobile-First User Interfaces with Oracle Data Visualizations [CON8185], Wednesday, 4:15pm, Room 304

JavaOne Conference Sessions

The following sessions will be presented at JavaOne:

  • HTML5 and JavaScript Clients in an Enterprise Application World [CON7767], Tuesday, 11am,  Hilton - Imperial Ballroom B
  • Coding for Desktop and Mobile with HTML5 and Java EE 7 [CON7773], Tuesday, 5:30pm,  Hilton - Yosemite A/B/C

Hands-On Labs

The following hands on labs focus on Data Visualizations in our different frameworks and are both located in Hotel Nikko - Nikko Ballroom III (3rd Floor):

  • Build Responsive Web Applications with Oracle ADF [HOL10380], Monday, 5pm
  • Getting Started with Oracle JavaScript Extension Toolkit [HOL10407], Wednesday, 8:45 am and Thursday, 12:30pm

Demo Grounds

Visit us at at the following demo booths in the Fusion Middleware Demogrounds:

  • Application Development Framework/Mobile Application Framework
  • Oracle JavaScript Extension Toolkit

See a complete list of development tools and frameworks sessions here.

We are looking forward to seeing you there!

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]

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.


« November 2015