I recently came across this requirement where the customer wanted to change the graph type at run-time based on some selection. After some internal discussions we realized this can be best achieved by using af:switcher to toggle between multiple graphs. In this blog I will be sharing the sample that I build to demonstrate this.

[Note] : In the below sample, every-time user changes graph type there is a server trip, so please use this approach with performance implications in mind.

This sample can be downloaded  from

DynamicGraph.zip

Set-up:

Create a BAM data control using employees DO (sample)(Refer this entry)

Steps:

Create the View

• Create a new JSF page .
• From component palette drag and drop "Select One Radio" into this page

• Enter some Label and click "Finish"In Property Editor set the "AutoSubmit" property to true
• Now drag and drop "Switcher" from components into this page.
  

• In the Structure pane select the af:switcher right click and surround with "PanelGroupLayout"

• In Property Editor set the "PartialTriggers"  property of PanelGroupLayout to the id of af:selectOneRadio

• Again in the Structure pane select the af:switcher right click and select "Insert inside af:switcher->facet"

• Enter Facet name (ex: pie)

• Again in the Structure pane select the af:switcher right click and select "Insert inside af:switcher->facet"

• Enter  another Facet name (ex: bar)

• From "Data Controls" drag and drop "Employees->Query"  into the pie facet as "Graph->Pie" (Pie: Sales_Number and Slices: Salesperson)

• From "Data Controls" drag and drop "Employees->Query"  into the bar facet as "Graph->Bar" (Bars :Sales_Number and X-axis : Salesperson).

• Now wire the switcher to the af:selectOneRadio using their "facetName" and "value" property respectively.

• Now run the page, notice that graph renders as per the selection by user.