Thursday, May 31, 2012

ADF 11g : How to create a climate Graph with ADF DVT

While preparing my trip to ODTUG KScope I needed to know whether or not I have to take shorts with me. I looked up the average temperature in San Antonio for June and July, and I it was clear. Shorts are needed..... I struck me that wherever I looked, all the climate data was displayed in the same kind of graph.  Climate Graphs as shown in the picture below ussually contain information about temparature and precipitation, Maximum, Minimum and Average temperature per month as well as precipitation per month.

I wondered if it is possible to create such a graph with ADF Data Visualization Tools. In this post I'll show you how to create such a climate graph.

It looks quit obvious. Create a graph with 3 line sections and one bar section, a combination of several types. The DVT component set contains a component. This is the one to go for. You can even pick a Dual Y axis in order to show a temperature axis and precipitation axis


When you use this component you will find out that simply dragging and dropping, and setting the datapoints will not do the trick for you.

Because when you run the graph you will not get the desired result.


JDeveloper configures one type per datapoint, so you get an Area-, Line- and Bar graph all in one

There is need for some extra configuration.I need to tell what kind of markerType will be used by each series. First I set a default Marker type for the Lines. That will be applied to all series that do not have their own markertype defined. Next I set Bar as the marker type for the precipitation points.






  <dvt:seriesSet defaultMarkerType="MT_CURVE_LINE">
   <dvt:series markerType="MT_BAR" index="0" assignedToY2="true"/>
   <dvt:series index="1" assignedToY2="false"/>
   <dvt:series index="2" assignedToY2="false"/>
  </dvt:seriesSet>  


Finally I make sure that the Y axes do not autoscale, and have predefined MIN and MAX values.

<dvt:y1Axis axisMaxValue="120" axisMinValue="0" axisMaxAutoScaled="false"/> 
 <dvt:y2Axis axisMaxValue="10" axisMinValue="0" axisMaxAutoScaled="false"/> 



After these minor changes, I get exactly what I expected to see. At home it is chilly..............

............................................ while in San Antonio it is hot.
 

2 comments:

Chris Muir said...

You convinced me.

I've been eering about taking shorts to KScope but if somebody is serious enough to use DVT graphs to show how hot it gets, shorts it is ;-)

Anonymous said...

Hi,

The post is interesting, thanks for the great post.
I want to generate this Dual Y axis bar and line through coding. I can able to generate bar but not lines through coding.
Can u pls let me know what parameters i need to add to listObject for getting both Bar and Line.

Thanks.