1 / 27

Creating Hierarchical Drill Downs for Flex Charts

Creating Hierarchical Drill Downs for Flex Charts. Dan Carotenuto Service Director, Product Marketing. Creating Hierarchical Drill Downs for Flex Charts Agenda. Technique Overview Create a Dashboard Convert chart to hierarchical drill down Make drill downs dynamic.

huy
Download Presentation

Creating Hierarchical Drill Downs for Flex Charts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related