Change the graph type dynamically at Run Time

This post is means to change the graph type dynamically during run time.

In this tutorial i have used the below read only VO query using below sql statement.

select count(department_id),department_id from employees group by department_id order by department_id desc;

Step 1 :

Drag and drop the dvt:graph from component palette and provide the following values so finally it should be look like.

<dvt:graph id="graph1" value="#{bindings.GrpahRunTime1.graphModel}"
                     graphType="#{pageFlowScope.sampleGraph.grpahType}"
                     partialTriggers="::graphTypeChoice" shortDesc="Test"/>

sampleGraph is a bean which has pasgeflow scope.

Step 2:

Drag and drop af:selectone choice component so that the user can choose the graph he needs to display. Provide the values listed below in the item list.

 <af:selectOneChoice label="Graph Type" id="graphTypeChoice"
                            autoSubmit="true" value="#{pageFlowScope.sampleGraph.grpahType}">
          <af:selectItem label="Vertical Bar" value="BAR_VERT_CLUST"/>
          <af:selectItem label="Line" value="LINE_VERT_ABS"/>
          <af:selectItem label="Area" value="AREA_VERT_ABS"/>
          <af:selectItem label="Horizontal Bar" value="BAR_HORIZ_CLUST"
                         />
        </af:selectOneChoice>

Step 3 :

sampleGrpah bean should be like

public class sampleGraph {
    String grpahType = null;

    public void setGrpahType(String grpahType) {
        this.grpahType = grpahType;
    }

    public String getGrpahType() {
        return grpahType;
    }
}

Step 4:

Now run the jspx page.
We can see the initial page after running the jspx

Now the user selects line from select one choice now the graph turns back into the line graph dynamically.

 While the user selects Area graph the graph turns into Area graph.