Creating Hierarchical Drill Downs for Flex Charts Dan Carotenuto Service Director, Product Marketing Copyright 2010, Information Builders. Slide 1

Creating Hierarchical Drill Downs for Flex Charts Agenda  Technique Overview  Create a Dashboard  Convert chart to hierarchical drill down  Make drill downs dynamic Copyright 2010, Information Builders. Slide 2

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) Copyright 2010, Information Builders. Slide 3 W= WebFOCUS WE= WebFOCUS Enable FA= Flex ActionScript FB= Flex Builder

Creating Hierarchical Drill Downs for Flex Charts Technique Overview  Products used in this technique  WebFOCUS Reporting Server  WebFOCUS Client  WebFOCUS Developer Studio  WebFOCUS Enable for Adobe Flex 3.0 Hotfix 1  Adobe Flex Builder 3 Copyright 2010, Information Builders. Slide 4

Creating Hierarchical Drill Downs for Flex Charts Create Flex Dashboard  Layout  Canvas: ibiCanvas (WE)  Panels: Panel (FB)  Flow/Direction: HBox, VBox (FB)  Add filters  ibiList (WE) Copyright 2010, Information Builders. Slide 5 WE= WebFOCUS Enable FB= Flex Builder  Add charts  ibiColumnChart (WE)

Creating Hierarchical Drill Downs for Flex Charts Load Dashboard with Data  Add IBI Data Grid to get data  ibiDataGrid (WE) Copyright 2010, Information Builders. Slide 6

Creating Hierarchical Drill Downs for Flex Charts Load Dashboard with Data  Bind the data grid to a WebFOCUS procedure (fex)  Property > IBI Data > seturl  /ibi_apps/WFServlet?IBIF_ex= ?IBIAPP_app= Copyright 2010, Information Builders. Slide 7

Creating Hierarchical Drill Downs for Flex Charts Load Dashboard with Data  Create linked filters  Set the data grid for filtering: ibiUseFiltered = true Copyright 2010, Information Builders. Slide 8

Creating Hierarchical Drill Downs for Flex Charts Load Dashboard with Data  Create linked filters  Allow multiple selections:  Common > allowMultipleSelection = true Copyright 2010, Information Builders. Slide 9

Creating Hierarchical Drill Downs for Flex Charts Load Dashboard with Data  Create linked filters  Set the component to be used as filter  ibiFilterAble = true Copyright 2010, Information Builders. Slide 10

Creating Hierarchical Drill Downs for Flex Charts Load 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 Copyright 2010, Information Builders. Slide 11

Creating Hierarchical Drill Downs for Flex Charts Load Dashboard with Data  Create linked filters  Link the filters: ibiFilterParent  Set ibiFilterParent to of linked parent filter Copyright 2010, Information Builders. Slide 12

Creating Hierarchical Drill Downs for Flex Charts Load 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 Copyright 2010, Information Builders. Slide 13

Creating Hierarchical Drill Downs for Flex Charts Load Dashboard with Data Copyright 2010, Information Builders. Slide 14

Creating Hierarchical Drill Downs for Flex Charts Create a drill down hierarchy  Create hierarchy array to store drill down path  Set up variables to store current and next dimensions Copyright 2010, Information Builders. Slide 15

Creating Hierarchical Drill Downs for Flex Charts Create a drill down hierarchy  Use method ( drillIt ) to handle runtime drill down  Update chart  ibiColumnChart.ibiGroupBy = nextDimension  ibiColumnChart.ibiXField = nextDimension Copyright 2010, Information Builders. Slide 16

Creating Hierarchical Drill Downs for Flex Charts Create a drill down hierarchy  Use method ( drillIt ) to handle runtime drill down  WebFOCUS Enable API: doFilterValue  Loop through each filter  this[“ibiList0”].dataProvider.length Copyright 2010, Information Builders. Slide 17

Creating Hierarchical Drill Downs for Flex Charts Create 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, ) Copyright 2010, Information Builders. Slide 18 Dynamically changes all objects when drilling

Creating Hierarchical Drill Downs for Flex Charts Create 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); Copyright 2010, Information Builders. Slide 19

Creating Hierarchical Drill Downs for Flex Charts Create a drill down hierarchy Copyright 2010, Information Builders. Slide 20

Creating Hierarchical Drill Downs for Flex Charts Add Drill Down Hierarchy User Controls  Set up a default hierarchy on initial display / run Copyright 2010, Information Builders. Slide 21

Creating Hierarchical Drill Downs for Flex Charts Add 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 Copyright 2010, Information Builders. Slide 22

Creating Hierarchical Drill Downs for Flex Charts Add 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 .selectedItem Copyright 2010, Information Builders. Slide 23

Creating Hierarchical Drill Downs for Flex Charts Add 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, ) Copyright 2010, Information Builders. Slide 24

Creating Hierarchical Drill Downs for Flex Charts Add 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”,””) Copyright 2010, Information Builders. Slide 25

Creating Hierarchical Drill Downs for Flex Charts Add Drill Down Hierarchy User Controls Copyright 2010, Information Builders. Slide 26

Questions Copyright 2010, Information Builders. Slide 27