Weblog for the AMIS Technology corner
Posts tagged data visualization
ADF DVT Hierarchy Viewer on demand – made to order multi table hierachy view
Aug 5th
This morning, I noticed the following email sitting in my Inbox: “Hello, Lucas.
I found Hierarchy Viewer demo from http://technology.amis.nl/blog/5786/adf-11gr1-new-hierarchical-viewer-for-visually-pleasing-representation-of-data-structures.
But i need to implement some kind of solution. I attached my expected mockup and table structure.
Is it possible? If possible, please suggest me how to do that and put your solution based on your experience.
I’m looking forward to hearing from you soon.“
Obviously, I normall completely ignore such emails – I do have a job you know, and some semblance of a normal life too. However, this email triggered me in some way. And between other more important things, I tried to create the desired hierarchy. The mock up looks like this:
The most challenging part is probably to get the query right. Once that query is defined – in a ViewObject with a selfrefencing ViewLink – creating the hierarchy is very straightforward. Some final styling is required – and a different design to the Radio Buttons, because those are not supported in the Hierarchy Viewer – but otherwise I think I did the job. My end result looks like this (from far away):
Note that the data I received with the email was not entitrely consistent with the mock up of the Hierarchy View.
Tour de France 2011 – Analysis using ADF DVT Graphs – Part 4 – Spark Charts
Jul 27th
The final episode in a series on ADF DVT applied to the Tour de France 2011 results. In this series, I have used many of the ADF DVT Graph components. In this article, I will use the Spark Chart component to integrate condensed data visualizations inside a table with ‘regular’ data.
The result is a table that lists the top 10 of the final overall ranking of the Tour de France, with for each ride in the top 10 two spark charts:
- the positition in the overall standings at the end of each stage
- the gap with Cadel Evans at the end of each stage (needless to say this chart is fairly pointless for Cadel Evans himself)
The resulting page with the table including the two spark charts looks like this:
Note that the Spark Chart for overall rank displays the #1 position at the top and lower rankings towards the bottom.
We can see from the table how for example the number 10 – Peraud – gradually worked his way up in the ranking – while just as gradually getting further behind Cadel Evans. We also see how Voeckler came to the top somewhere midway and then ever so slightly had to let go of that top position. Only the first three days and the last three days saw him behind Evans.
Tour de France 2011 – Analysis using ADF DVT Graphs – Part 3 – Distance, Speed and Withdrawals with Pareto, Combination, Stock Chart (High/Low) and Bubble Chart
Jul 26th
Another article on analyzing and visualizing the results from the Tour de France 2011 using the ADF DVT components. This article uses the same set of data already discussed in several previous articles – including the standings per stage as well as the overall standings after each stage. This article will focus on using the combination graph, the bubble graph and the high/low (aka stock) chart for taking a closer look at speed, length and withdrawals (and any connection there can be between these aspects).
Some of the pretty pictures created in this article:
Creating an ADF Faces Dynamic Table with multi-faceted Head-to-Head comparison between records
Jul 2nd
This article shows how to create a widget in an ADF Faces application that looks like this:
This table shows a comparison between records – Departments in this case – on a number of different aspects. The table compares four departments on characteristics like their name and location, the number of staff they contain and the Average Salary (in $) and Experience (in Days). Some of these comparisons are visualized by bars – with the length of the bar depicting the value at stake.
The comparison table could be further improved by introducing colors, nicer looking labels, highlighting exceptions, indicating thresholds, using Gauges etc. That’s for another time.
In this article, the topics covered are:
- create ViewObject to gather the data
- create a Managed Bean that constructs the data model – based on the data provided through the ViewObject – in a structure that the web page can work with
- create a dynamic table component that paints the table using the Managed Bean’s model (using the approach introduced in a previous article – http://technology.amis.nl/blog/12739/suggestion-for-new-type-of-adf-dvt-data-visualization-the-delta-graph-to-visualize-relative-changes-integrated-in-a-table-layout – on how to create the little bars in table cells)
The source code is downloadable at the end of this article. Note: the article is fairly sparse- as the code is fairly self-explanatory.
Suggestion for new type of ADF DVT (Data Visualization): the Delta Graph – to visualize relative changes integrated in a table layout
Jul 1st
I may have bored you before with stories about Data Visualization. It is one of my favorite topics. We deal in data. And visualization of data can help to increase the value of the data tremendously. Proper visualization provides quicker insight and reveals the true meaning of the numbers in an instant.
Newspapers frequently use graphics to illustrate the news reported in their articles. My morning paper has a broad palette of ways to represent numbers, trends, aggregates and incidents. It inspires me to mimic in my own toolset: ADF.
The other day, my newspaper printed the next figure that illustrates the changes in circulation for all Dutch newspapers – comparing the 1st quarter of 2011 with one year ago.
I quite like this presentation. It reveals a lot of information in an appealing way. I started wondering it this way of presenting changes would be easy to implement in ADF Faces applications. My first port of call obviously was the ADF DVT (Data Visualization Tags) library. However, it did not seem to offer a graph type that is very close to this presentation. Gauges appeared to come closest, but not quite there. And the inline-display inside table rows is related to spark charts, but again, it is not quite the same.
So I started playing with ‘ordinary’ ADF Faces and – using some CSS definitions – I came up with the following ADF Faces rendition of the Delta Graph:
In addition to the initial presentation, this ADF based version of the Delta Graph allows manipulation of the view, for example sorting the records by change or by current circulation:
ADF 11gR1 – new Hierarchical Viewer for visually pleasing representation of data structures
Jul 7th
One of the data visualization tags required by the teams working on the Oracle Fusion Application Module for Human Resource Management, was a component capable of rendering organization charts. Hierarchical structures from CEO all the way down to the youngest trainee. In a pleasing, graphically interesting, somewhat animated fashion. And so the ADF team developed the Hierarchy Viewer. And since they developed it anyway, we can now make use of it as well. While it may not be the component you will most frequently use, it is certainly an interesting presentation option for special data structures. This component can work against the same tree data binding you would use for tree tables or trees, and can therefore be configured in a very simple, declarative fashion.
In this article some simple examples of how to use this new component. This article is the short summary of a presentation and demonstration I did at the recent ODTUG Kaleidoscope 2009 conference (late June, Monterey). It demonstrates how the conference’s session schedule can be represented in the Hierarchy Viewer.
