Dynamically changing DVT Graph at Runtime
- by mona.rakibe(at)oracle.com
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.zipSet-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 trueNow 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:selectOneRadioAgain 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.