How to set bar chart colors programmatically according to values found in another column of the View Object

 

This example shows how to set bar fill colors according to data in another column of the same View Object (WarehouseStockLevelsView) that was used to create the bar chart.

When you press the button, the colors will change based on the corresponding zip code value for each bar (note that zip code is not a field used to build the graph), which means that it checks data in another column in the row and sets the bar colors according to the values in that other column.

This sample works with the FOD db schema and the model project of the sample application used in the Introduction to ADF Data Visualization Components - Graphs, Gauge, Maps, Pivot Table and Gantt tutorial.

To do something similar to the sample available on this blog post, you can do the following:

 

1. Execute the following sections of the tutorial mentioned above:

  • Overview
  • Scenario
  • Prerequisites
  • Add a Bar Chart

The "Create a Master Detail Order Page" section can be skipped and within the "Add a Bar Chart" section will be enough to follow until step 7 only.

 

 

2. Create a jspx and expose the UI contents on a managed bean.

 

 

3. Source code for the jspx page used on this example: 

 

TestBarChart1.jspx

<?xml version='1.0' encoding='windows-1252'?>

<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"

          xmlns:f="http://java.sun.com/jsf/core"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:af="http://xmlns.oracle.com/adf/faces/rich"

          xmlns:dvt="http://xmlns.oracle.com/dss/adf/faces">

  <jsp:directive.page contentType="text/html;charset=windows-1252"/>

  <f:view>

    <af:document id="d1" binding="#{backingBeanScope.backing_TestBarChart1.d1}">

      <af:messages binding="#{backingBeanScope.backing_TestBarChart1.m1}"

                   id="m1"/>

      <af:form id="f1" binding="#{backingBeanScope.backing_TestBarChart1.f1}">

        <dvt:barGraph id="barGraph1"

                      value="#{bindings.WarehouseStockLevelsView1.graphModel}"

                      subType="BAR_VERT_CLUST"

                      binding="#{backingBeanScope.backing_TestBarChart1.barGraph1}"

                      threeDEffect="true">

          <dvt:background>

            <dvt:specialEffects/>

          </dvt:background>

          <dvt:graphPlotArea/>

          <dvt:seriesSet>

            <dvt:series color="#ffffff"/>

            <dvt:series color="#ff0000"/>

            <dvt:series color="#0000ff"/>

          </dvt:seriesSet>

          <dvt:o1Axis/>

          <dvt:y1Axis/>

          <dvt:legendArea automaticPlacement="AP_NEVER"/>

          <dvt:o1MajorTick id="o1MajorTick1" tickStyle="GS_AUTOMATIC"/>

        </dvt:barGraph>

        <af:commandButton text="Change Chart Colors"

                          binding="#{backingBeanScope.backing_TestBarChart1.cb1}"

                          id="cb1"

                          action="#{backingBeanScope.backing_TestBarChart1.changeColors}"/>

      </af:form>

    </af:document>

  </f:view>

  <!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_TestBarChart1-->

</jsp:root>

 

 

4. Method used in the managed bean:

 

TestBarChart1.java

public void changeColors() {

    String amDef = "oracle.fod.model.FODModule";

    String config = "FODModuleLocal";

    ApplicationModule am = Configuration.createRootApplicationModule(amDef,config);

    ViewObject vo = am.findViewObject("WarehouseStockLevelsView1");

    Row row;

    while (vo.hasNext())

    {

        row = vo.next();

        // if the corresponding zip code is higher than 94100 the color will be set to black

        // otherwise, it will be set to blue

        if (Integer.parseInt(row.getAttribute(7).toString()) > 94100)

            barGraph1.getSeriesSet().getSeries(vo.getCurrentRowIndex(), true).setColor(Color.BLACK);

        else

            barGraph1.getSeriesSet().getSeries(vo.getCurrentRowIndex(), true).setColor(Color.BLUE);

    }               

}

 


When running the application you should get graphics like the following before and after pressing the button:


barchartbefore.jpg

Figure 1 - Bar chart before pressing the button


barchartafter.jpg

Figure 2 - Bar chart after pressing the button

 

The sample (created with JDeveloper 11.1.1.2.0) can be downloaded here.


Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About


Principal Technical Support Engineer in the Engineered (Systems) Enterprise Support Team - EEST.
Former member of the Coherence and Java Technologies Support Teams.

Search

Archives
« March 2015
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
10
11
12
13
14
15
16
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today