Slide 1

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

Slide 2

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

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

Slide 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 Hotfix 1 Adobe Flex Builder 3 Copyright 2010, Information Builders. Slide 4

Slide 5

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)

Slide 6

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

Slide 7

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

Slide 8

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

Slide 9

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

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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 charts axis: ibiXField, ibiYField Set the chart for filtering: ibiUseFiltered = true Specify the column grouping: ibiGroupBy Copyright 2010, Information Builders. Slide 13

Slide 14

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

Slide 15

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

Slide 16

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

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 Loop through each filter this[ibiList0].dataProvider.length Copyright 2010, Information Builders. Slide 17

Slide 18

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

Slide 19

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

Slide 20

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

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

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

Slide 27

Questions Copyright 2010, Information Builders. Slide 27