Custom Line Charts with data from Managed Bean

This post is about data visualization in ADF. Developer often get requirements where they are required to show the data from managed bean in the form of line charts. Such methodology gives flexibility to change number of series and allows you to add distinct data source for different series, thus, one can customize their visualization data based on some business logic. 

Here is what I am going to create.  

You can add as many as series as you need by manipulating your code for data model object that we going to use.

Just follow these simple steps to create such line chart:

1. Add "Line" component from component window.

2. Create a managed bean. Note: this managed bean is going to provide data model to our chart. In this example, the LineChartBean class defines the chart's CollectionModel in the getWeeklyStockData() method which calls the getPortfolioData() method to define the chart's data items.

public class LineChartBean {   

    /**

    * Object representing the data for a single row of the model.

    */

      public static class ChartDataItem extends HashMap<String, Object> {

      @SuppressWarnings("compatibility")

      private static final long serialVersionUID = 1L;

           

      public ChartDataItem(String series, Object group, Number value) {

        put("series", series);

        put("group", group);

        put("value", value);

      }                     

    }

      public CollectionModel getWeeklyStockData() {

        return getPortfolioData(4, 157, 2013, 6, 1, Calendar.DATE, 7);

      }

    

      private Random random = new Random(23);

       

      private double getNextValue(double curValue, double std) {

        if (curValue == 0)

          return 0;

        else

          return Math.max(curValue + random.nextGaussian() * std, 0);

      }

      public CollectionModel getPortfolioData(int numSeries, int numGroups,

                                              int startYear, int startMonth,

                                              int startDate, int dateField,

                                              int addCount)

      {

        List<ChartDataItem> dataItems = new ArrayList<ChartDataItem>();

        GregorianCalendar cal;

        double curValue;

        for(int series=0; series<numSeries; series++) {

          cal = new GregorianCalendar(startYear, startMonth, startDate);

          curValue = 100;

          for(int group=0; group<numGroups; group++) {

            dataItems.add(new ChartDataItem("Series " + (series+1), cal.getTime(),

                                             curValue));

            cal.add(dateField, addCount);

            curValue = getNextValue(curValue, 10);

          }

        }

        return ModelUtils.toCollectionModel(dataItems);

      }

   

}

3.  Now select dvt:lineChart from structure window and goto properties. 

    Expand data section in properties and enter a value for Var field. 

 

4. Again, right click on f:facet in the structure window and add Chart Data Item as shown in the image below.

 

5. Now it is the time to provide data to our chart from managed bean. I am writing the code snippet of my line chart component.

 <dvt:lineChart id="chart1" value="#{LineChartBean.weeklyStockData}"         timeAxisType="enabled"
                                   var="row">
                        <dvt:chartLegend id="leg1" rendered="true" position="top"/>
                        <f:facet name="dataStamp">
                            <dvt:chartDataItem group="#{row.group}" id="cdi1" series="#{row.series}"
                                               value="#{row.value}"/>
                        </f:facet>
                    </dvt:lineChart>

To customize the tooltip that is displayed when the user moves the focus to a data point, enter a value in the shortDesc field. You can configure any additional properties as needed to customize the data item.

You will be able to see a resplendent line chart after making changes according to the given code snippet.