Overview

A guest post by Jeanne Waldman.

I have a simple JDeveloper Fusion application that retrieves weather data. I wanted to compare the week's temperatures of different locations in a graph. I decided to check out the dvt:lineGraph component, and it took me a few minutes to add it to my jspx page and supply it with data.

Drag and Drop the dvt:lineGraph onto your page

I opened my .jspx page in design mode
In the Component Palette, I selected ADF Data Visualization.
Then I dragged 'Line' onto my page.
A dialog popped up giving me options of the type of line graph. I chose the default.
A lineGraph displayed with some default data.

 
Hook up your weather data

Now I wanted to hook up my own data. I browsed the tagdoc, and I found the tabularData attribute.

Attribute: tabularData
Type: java.util.List
TagDoc:
Specifies a list of data that the graph uses to create a grid and populate itself. The List consists of a three-member Object array for each data value to be passed to the graph. The members of each array must be organized as follows: The first member (index 0) is the column label, in the grid, of the data value. This is generally a String. If the graph has a time axis, then this should be a Java Date. Column labels typically identify groups in the graph. The second member (index 1) is the row label, in the grid, of the data value. This is generally a String. Row labels appear as series labels in the graph (usually in the legend). The third member (index 2) is the data value, which is usually a Double.

The first member is the column label of the data value. This would be the day of the week.

The second member is the row label of the data value. This would be the location name.

The third member is the data value, usually a Double. This would be the temperature. 

I already had all this information, I just needed to put it in a List with a three-member Object array for each data value. 

  /**
   * This is used for the lineGraph to show the data for each location.
   */
  public List<Object[]> getTabularData()
  {
     List<Object[]> tabularData = new ArrayList<Object []>();
     List<WeatherForecast> weatherForecastList = getWeatherForecastList();
     // loop through the list and build up the tabular data. Then cache it.
     for(WeatherForecast wf : weatherForecastList)
     {
       List<ForecastDay> forecastDayList = wf.getForecastDayList();
       String location = wf.getLocation();
       for (ForecastDay fday : forecastDayList)
       {
         String day = fday.getPrettyDate();
         String highTemp = fday.getHighF();
         tabularData.add(new Object[]{day, location, Double.valueOf(highTemp)});
       }
      
     }
     return tabularData;
   }  

Now I bound the lineGraph to this method by setting tabularData to

#{weatherForAllLocationsBean.tabularData}

weatherForAllLocationsBean is my bean that is defined in faces-config.xml.
 

Adding a barGraph

In about 30 seconds, I added a barGraph with the same data. I dragged and dropped a bar graph onto the page, used the same tabularData as I did in the line graph. The page looks like this:

Conclusion

I was very happy how fast it was to hook up my weather data to these graphs. They look great, and they have built in functionality. For instance, I can hide/show a location by clicking on the name of the location in the legend.