Creating Hierarchical Drill Downs for Flex Charts

1. Creating Hierarchical Drill Downs for Flex Charts Dan Carotenuto Service Director, Product Marketing

2. Creating Hierarchical Drill Downs for Flex ChartsAgenda • Technique Overview • Create a Dashboard • Convert chart to hierarchical drill down • Make drill downs dynamic

3. Creating Hierarchical Drill Downs for Flex Charts Technique Overview • Create a Flex dashboard (WE, FB) • Load dashboard with data (WE, W) • Create a drill down hierarchy (WE, FA) • Add drill down hierarchy user controls (FB, WE) • Enable drill down hierarchy (WE, FA) W = WebFOCUS WE = WebFOCUS Enable FA = Flex ActionScript FB = Flex Builder

4. Creating Hierarchical Drill Downs for Flex Charts Technique Overview • Products used in this technique • WebFOCUS Reporting Server 7.6.10 • WebFOCUS Client 7.6.10 • WebFOCUS Developer Studio 7.6.10 • WebFOCUS Enable 1.0.1 for Adobe Flex 3.0 Hotfix1 • Adobe FlexBuilder 3

5. Creating Hierarchical Drill Downs for Flex ChartsCreate Flex Dashboard • Layout • Canvas: ibiCanvas (WE) • Panels: Panel (FB) • Flow/Direction: HBox, VBox (FB) • Add filters • ibiList (WE) • Add charts • ibiColumnChart (WE) WE = WebFOCUS Enable FB = Flex Builder

6. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data • Add IBI Data Grid to get data • ibiDataGrid (WE)

7. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data • Bind the data grid to a WebFOCUS procedure (fex) • Property > IBI Data > seturl • http://<ip>/ibi_apps/WFServlet?IBIF_ex=<name.fex>?IBIAPP_app=<WF app>

8. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data • Create linked filters • Set the data grid for filtering: ibiUseFiltered = true

9. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data • Create linked filters • Allow multiple selections: • Common > allowMultipleSelection = true

10. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data • Create linked filters • Set the component to be used as filter • ibiFilterAble = true

11. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data • Create linked filters • Set the source of the data: ibiParent • Specify the column to display distinct values: ibiColumn • Order the values: ibiSortValues

12. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data • Create linked filters • Link the filters: ibiFilterParent • Set ibiFilterParent to <id> of linked parent filter

13. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data • Load the column chart • Set the source of the column chart: ibiParent • Set the chart’s axis: ibiXField, ibiYField • Set the chart for filtering: ibiUseFiltered= true • Specify the column grouping: ibiGroupBy

14. Creating Hierarchical Drill Downs for Flex ChartsLoad Dashboard with Data

15. Creating Hierarchical Drill Downs for Flex ChartsCreate a drill down hierarchy • Create hierarchy array to store drill down path • Set up variables to store current and nextdimensions

16. Creating Hierarchical Drill Downs for Flex ChartsCreate a drill down hierarchy • Use method (drillIt) to handle runtime drill down • Update chart • ibiColumnChart.ibiGroupBy = nextDimension • ibiColumnChart.ibiXField = nextDimension

17. Creating Hierarchical Drill Downs for Flex ChartsCreate a drill down hierarchy • Use method (drillIt) to handle runtime drill down • WebFOCUS Enable API: doFilterValue • Loop through each filter • this[“ibiList0”].dataProvider.length

18. Creating Hierarchical Drill Downs for Flex ChartsCreate a drill down hierarchy • Use method (drillIt) to handle runtime drill down • WebFOCUS Enable API: doFilterValue • Apply to IBI Canvas for each filter: • ibiCvs1.doFilterValue(ibiList0,<n>) • Dynamically changes all objects when drilling

19. Creating Hierarchical Drill Downs for Flex ChartsCreate a drill down hierarchy • Enable chart for drill down • Set Events > itemClick to call a method that drills down • Pass the event to a method: drillIt(event);

20. Creating Hierarchical Drill Downs for Flex ChartsCreate a drill down hierarchy

21. Creating Hierarchical Drill Downs for Flex ChartsAdd Drill Down Hierarchy User Controls • Set up a default hierarchy on initial display / run

22. Creating Hierarchical Drill Downs for Flex ChartsAdd Drill Down Hierarchy User Controls • Add combo boxes for users to set drill path at runtime • Set combo box values to data column names: seturl • Run a WebFOCUS procedure to return metadta column names

23. Creating Hierarchical Drill Downs for Flex ChartsAdd Drill Down Hierarchy User Controls • Create a method to handle dynamic runtime drill path • Bind dimension data (column names) to combo boxes • Change hierarchy to be dynamically loaded • <combo box id>.selectedItem

24. Creating Hierarchical Drill Downs for Flex ChartsAdd Drill Down Hierarchy User Controls • Create a method to handle dynamic runtime drill path • Update filters with user selections: doFilterValue • Apply to IBI Canvas for each filter: • ibiCvs1.doFilterValue(ibiList0,<n>)

25. Creating Hierarchical Drill Downs for Flex ChartsAdd Drill Down Hierarchy User Controls • Create a method to handle dynamic runtime drill path • Reload data by reloading ibiCanvas and IBI Data Grid • WebFOCUS Enable API • this.ibiCvs1.reloadData(“ibiDG”,””)

26. Creating Hierarchical Drill Downs for Flex Charts Add Drill Down Hierarchy User Controls

27. Questions