Flex Enterprise & Data Visualization:
     Going one step further with
          IBM ILOG Elixir


                       ...
Agenda

        IBM ILOG Elixir in Nutshell
        IBM ILOG Elixir Tips & Tricks:
              From 2D to 3D Charts
 ...
IBM ILOG Elixir in a Nutshell

        Provide every Flex & AIR developer with custom Flex UI
         components useful ...
IBM ILOG Elixir in a Nutshell

        3D Charts (Area, Line,
         Column, Bar & Pie)
                  Demo


      ...
IBM ILOG Elixir in a Nutshell

        Maps for Dashboards
                            Demo
        Heat Maps


       ...
IBM ILOG Elixir in a Nutshell

        Calendar (new in 2.0)
                 Demo


        Gantt Resource Chart
      ...
IBM ILOG Elixir in a Nutshell

        Organization Chart
               Demo



        Treemap
               Demo



...
IBM ILOG Elixir in a Nutshell

        Flex Builder tight integration:
              design view
              property...
IBM ILOG Elixir in a Nutshell

        Delivered with code samples and demos
        Learn by examples in               ...
Tips & Tricks – From 2D to 3D Charts
       Original:
       <mx:ColumnChart id=quot;columnquot; showDataTips=quot;truequo...
Tips & Tricks – From 2D to 3D Charts
       Result:
       <ilog:ColumnChart3D id=quot;columnquot; showDataTips=quot;trueq...
Tips & Tricks – From 2D to 3D Charts




   But we do not provide 3D API for customizing your display,
    so you can't s...
Tips & Tricks – Building a Custom Gauge

        IBM ILOG Elixir provides with with predefined
         Circular, Semi Ci...
Tips & Tricks – Building a Custom Gauge
 <ilog:CircularGauge color=quot;0xFFFFFFquot;>
  <ilog:scales>
    <ilog:CircularL...
Tips & Tricks – Expand/Collapse on the OrgChart

        By default the OrgChart is displaying the entire
         OrgCha...
Tips & Tricks – Expand/Collapse on the OrgChart




05/14/2009             © ILOG, All rights reserved   16
Tips & Tricks – Create a custom Map dashboard

       Workflow:

       1. Create or get your map in ESRI SHP file format
...
Tips & Tricks – Create a custom Map dashboard




05/14/2009            © ILOG, All rights reserved   18
Tips & Tricks – Your Google Calendar in AIR

        IBM ILOG Elixir Calendar component is taking any Flex data as
      ...
Tips & Tricks – Your Google Calendar in AIR

       Reading iCal feed or exported file
        Google Calendar export to ...
Tips & Tricks – Your Google Calendar in AIR

       Reading iCal feed or exported file
        Google Calendar provides a...
Tips & Tricks – Your Google Calendar in AIR




05/14/2009             © ILOG, All rights reserved   22
Tips & Tricks – Density Heatmap of Flickr photos

        The HeatMap principle:
              Displaying the densities ...
Tips & Tricks – Density Heatmap of Flickr photos




05/14/2009             © ILOG, All rights reserved   24
Tips & Tricks – Display scheduling information from MS Project


        IBM ILOG Elixir TaskChart control displays sched...
Tips & Tricks – Display scheduling information from MS Project




05/14/2009                      © ILOG, All rights rese...
What's next? - Building on top of Flex 4

        Adobe intends to release Flex 4 in fall 2009
        What could we do?...
What's next? - Leveraging Flash Player 10

        Gumbo will require Flash Player 10 => we can rely on
         Flash Pl...
What's next? - What do you need from us?

        You can help!
        Please contribute at http://elixir-bugs.ilog.com...
Resources

        Get more information & IBM ILOG Elixir 2.0 Free Trial
         on the Developer Center
        http:/...
Questions & Answers


      Thank You




      © ILOG, All rights reserved
Upcoming SlideShare
Loading in …5
×

Christophe Jolif - Flex Data Visualization going one step further with IBM ILOG Elixir

2,300 views

Published on

This session will first introduce IBM ILOG Elixir visual components and describe how they can help you improve data visualization for your Adobe Flex & AIR applications. In particular, the latest release and its new components such as pivot charts, calendars, heat maps, and Gantt project management displays will be described into details. Then the session will offer a deep technical dive, showing coding tips and tricks and how-tos information such as how to connect an ILOG Elixir Heatmap component to flickr API to display photos geolocation information, or how to extend the ILOG Elixir OrgChart to provide expand and collapse functionality. Finally we will see how Flex 4 and its new component architecture Spark could impact visual components development and use when released.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,300
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Christophe Jolif - Flex Data Visualization going one step further with IBM ILOG Elixir

  1. 1. Flex Enterprise & Data Visualization: Going one step further with IBM ILOG Elixir May 18, 2009 Christophe Jolif christophe.jolif@fr.ibm.com http://blogs.ilog.com/elixir/author/cjolif © ILOG, All rights reserved
  2. 2. Agenda  IBM ILOG Elixir in Nutshell  IBM ILOG Elixir Tips & Tricks:  From 2D to 3D Charts  Building a Custom Gauge  Expand/Collapse on the OrgChart  Create a custom Map dashboard  Your Google Calendar in AIR  Density Heatmap of Flickr photos  Display scheduling information from MS Project  What’s Next?  Building on top of Flex 4  Leveraging Flash Player 10  What do you need from us?  Resources 05/14/2009 © ILOG, All rights reserved 2
  3. 3. IBM ILOG Elixir in a Nutshell  Provide every Flex & AIR developer with custom Flex UI components useful for complementing Adobe offering for all type of applications from data visualization to enterprise applications  ILOG Elixir 1.0 released in Feb 2008 based on Flex 3.0.0  patch 1 released in May 2008  patch 2 released in March 2009  ILOG Elixir 2.0 released in Feb 2009 based on Flex 3.0.2 05/14/2009 © ILOG, All rights reserved 3
  4. 4. IBM ILOG Elixir in a Nutshell  3D Charts (Area, Line, Column, Bar & Pie) Demo  Radar / Spider Chart Demo  OLAP and Pivot Charts (new in 2.0) Demo 05/14/2009 © ILOG, All rights reserved 4
  5. 5. IBM ILOG Elixir in a Nutshell  Maps for Dashboards Demo  Heat Maps  Gauges and Dials Demo  Digital Indicators (new in 2.0) 05/14/2009 © ILOG, All rights reserved 5
  6. 6. IBM ILOG Elixir in a Nutshell  Calendar (new in 2.0) Demo  Gantt Resource Chart Demo  Gantt Task Chart (new in 2.0) Demo 05/14/2009 © ILOG, All rights reserved 6
  7. 7. IBM ILOG Elixir in a Nutshell  Organization Chart Demo  Treemap Demo 05/14/2009 © ILOG, All rights reserved 7
  8. 8. IBM ILOG Elixir in a Nutshell  Flex Builder tight integration:  design view  property editing  code & mxml hinting  integrated documentation  Full integration with Flex framework and practices:  Follow Flex UIComponent convention for events, styling and invalidation mechanisms  Fully localizable, provided with en_US and ja_JP locales  Keyboard accessibility for most components  Flex 3.0.2 Marshall Plan support for cross-versioning and cross- domain applications (2.0) 05/14/2009 © ILOG, All rights reserved 8
  9. 9. IBM ILOG Elixir in a Nutshell  Delivered with code samples and demos  Learn by examples in on AIR or on the web at: http://www.adobe.com/ devnet/flex/tourdeflex/web  Dedicated forums at http://forums.ilog.com/elixir and blog at http://blogs.ilog.com/elixir 05/14/2009 © ILOG, All rights reserved 9
  10. 10. Tips & Tricks – From 2D to 3D Charts Original: <mx:ColumnChart id=quot;columnquot; showDataTips=quot;truequot; dataProvider=quot;{medalsAC}quot; > <mx:horizontalAxis> <mx:CategoryAxis categoryField=quot;Countryquot;/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries xField=quot;Countryquot; yField=quot;Goldquot; displayName=quot;Goldquot; fill=quot;{sc1}quot; stroke=quot;{s1}quot; /> <mx:ColumnSeries xField=quot;Countryquot; yField=quot;Silverquot; displayName=quot;Silverquot; fill=quot;{sc2}quot; stroke=quot;{s2}quot; /> <mx:ColumnSeries xField=quot;Countryquot; yField=quot;Bronzequot; displayName=quot;Bronzequot; fill=quot;{sc3}quot; stroke=quot;{s3}quot; /> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider=quot;{column}quot;/> 05/14/2009 © ILOG, All rights reserved 10
  11. 11. Tips & Tricks – From 2D to 3D Charts Result: <ilog:ColumnChart3D id=quot;columnquot; showDataTips=quot;truequot; dataProvider=quot;{medalsAC}quot; > <ilog:horizontalAxis> <mx:CategoryAxis categoryField=quot;Countryquot;/> </ilog:horizontalAxis> <ilog:series> <ilog:ColumnSeries3D xField=quot;Countryquot; yField=quot;Goldquot; displayName=quot;Goldquot; fill=quot;{sc1}quot; stroke=quot;{s1}quot; /> <ilog:ColumnSeries3D xField=quot;Countryquot; yField=quot;Silverquot; displayName=quot;Silverquot; fill=quot;{sc2}quot; stroke=quot;{s2}quot; /> <ilog:ColumnSeries3D xField=quot;Countryquot; yField=quot;Bronzequot; displayName=quot;Bronzequot; fill=quot;{sc3}quot; stroke=quot;{s3}quot; /> </ilog:series> </ilog:ColumnChart3D> <mx:Legend dataProvider=quot;{column}quot;/> 05/14/2009 © ILOG, All rights reserved 11
  12. 12. Tips & Tricks – From 2D to 3D Charts  But we do not provide 3D API for customizing your display, so you can't switch itemRenderer just play with styling properties (fill, stroke…)  Also items are not UIComponents, so you must use chart specific events & effects like itemClick, showDataEffect … not UIComponents events & effects (click, showEffect…) 05/14/2009 © ILOG, All rights reserved 12
  13. 13. Tips & Tricks – Building a Custom Gauge  IBM ILOG Elixir provides with with predefined Circular, Semi Circular, Horizontal and Vertical Gauges  They fit most simple use-cases but you might want more, like mutli-value gauges  Just assemble MXML elements and you’ll be able to achieve what you need using the Gauges framework 05/14/2009 © ILOG, All rights reserved 13
  14. 14. Tips & Tricks – Building a Custom Gauge <ilog:CircularGauge color=quot;0xFFFFFFquot;> <ilog:scales> <ilog:CircularLinearScale maximum=quot;250quot; id=quot;speedScalequot; startAngle=quot;200quot; endAngle=quot;340quot;/> <ilog:CircularLinearScale maximum=quot;100quot; id=quot;fuelScalequot; startAngle=quot;140quot; endAngle=quot;40quot; majorTickInterval=quot;50quot; minorTickInterval=quot;25quot; /> </ilog:scales> <ilog:elements> <ilog:CircularGaugeAsset asset=quot;@Embed(source='black_circle.swf')quot;/> <ilog:CircularScaleRenderer radius=quot;35%quot; scale=quot;{speedScale}quot; labelRadius=quot;102%quot; labelPlacement=quot;outsidequot; minorTickLength=quot;10%quot; labelFontSize=quot;12%quot; fontWeight=quot;boldquot; majorTickRenderer=quot;{myTickRenderer}quot; minorTickRenderer=quot;{myTickRenderer}quot; /> <ilog:CircularTrackRenderer minimum=quot;150quot; maximum=quot;250quot; radius=quot;28%quot; scale=quot;{speedScale}quot;> <ilog:gradientEntries> <mx:GradientEntry color=quot;0x00DD00quot; ratio=quot;0quot;/> <mx:GradientEntry color=quot;0xDDD000quot; ratio=quot;0.5quot;/> <mx:GradientEntry color=quot;0xDD0000quot; ratio=quot;1quot;/> </ilog:gradientEntries> </ilog:CircularTrackRenderer> <ilog:NeedleRenderer thickness=quot;7%quot; radius=quot;30%quot; value=quot;{speed.value}quot; scale=quot;{speedScale}quot;/> <!-- and more --> </ilog:elements> </ilog:CircularGauge> 05/14/2009 © ILOG, All rights reserved 14
  15. 15. Tips & Tricks – Expand/Collapse on the OrgChart  By default the OrgChart is displaying the entire OrgChart hierarchy available in dataProvider  You might want to display only down to a certain level and provide expand/collapse ability  What you need: 1.The ability to filter the data depending on whether children are expanded or collapsed 2.The ability for the user to interact with the OrgChart to target an expand or a collapse action  How do you achieve this? 1.By using a filterFunction on ICollectionView 2.By providing a custom OrgChartItemRenderer with a +/- button  Let's take a look at the code & result! 05/14/2009 © ILOG, All rights reserved 15
  16. 16. Tips & Tricks – Expand/Collapse on the OrgChart 05/14/2009 © ILOG, All rights reserved 16
  17. 17. Tips & Tricks – Create a custom Map dashboard Workflow: 1. Create or get your map in ESRI SHP file format 2. Import it in IBM ILOG Elixir Custom Map Converter 3. Set Parameters 4. Export it as ActionScript 5. Include it in your Flex Builder Project 6. Use it in your MXML/AS code to represent dashboard data Let's do it live! 05/14/2009 © ILOG, All rights reserved 17
  18. 18. Tips & Tricks – Create a custom Map dashboard 05/14/2009 © ILOG, All rights reserved 18
  19. 19. Tips & Tricks – Your Google Calendar in AIR  IBM ILOG Elixir Calendar component is taking any Flex data as input in a form of a list of quot;eventsquot; with optional recurrence information  That input must be provided as XML or ActionScript object in the dataProvider, just a for any data-aware Flex component  Two approaches: 1. Reading the iCal feed or exported file from Google Calendar:  Allows to mashup from different iCal sources 2. Using the Google Calendar API  More integrated with Google Calendar (authentication etc...) 05/14/2009 © ILOG, All rights reserved 19
  20. 20. Tips & Tricks – Your Google Calendar in AIR Reading iCal feed or exported file  Google Calendar export to iCal that is a simple definition format for events  Creating a dataProvider from iCal events is a matter of reading TXT and creating AS objects  For the recurrence information it could be a bit more complex:  One can provide any format of recurrence by providing his own IRecurrenceDescriptor to the IBM ILOG Elixir Calendar  However default IRecurrenceDescriptor implementation is RFC2445 based so it is not needed to go as far 05/14/2009 © ILOG, All rights reserved 20
  21. 21. Tips & Tricks – Your Google Calendar in AIR Reading iCal feed or exported file  Google Calendar provides a Web Service API: http:// code.google.com/apis/calendar/docs/2.0/ developers_guide_protocol.html  Create an ActionScript wrapper that calls this web service and exposes result as ActionScript objects  As in previous case, configure the IBM ILOG Elixir Calendar with the right dataProvider  More on this at: http://blogs.ilog.com/elixir/2009/03/16/ display-google-calendars-using-ilog-elixir 05/14/2009 © ILOG, All rights reserved 21
  22. 22. Tips & Tricks – Your Google Calendar in AIR 05/14/2009 © ILOG, All rights reserved 22
  23. 23. Tips & Tricks – Density Heatmap of Flickr photos  The HeatMap principle:  Displaying the densities or values of data objects using color at given location (optionally over a map)  In our case this is the density of photos taken at given geolocation and available on Flickr over a map  How do you achieve this?  We create a MapHeatMap with a USStatesMap and a DensityHeatMap and configure the heatmap to take location information in longitude & latitude properties of the data objects  We extend Flickr2AS API to manage Flickr quot;Placequot; API  We request to Flickr photos over a particular quot;Placequot; using that API (US in our case)  We iterate over the results (paged results) and populate the data provider of the DensityHeatMap with them as they correctly use longitude & latitude properties  We just look at the result 05/14/2009 © ILOG, All rights reserved 23
  24. 24. Tips & Tricks – Density Heatmap of Flickr photos 05/14/2009 © ILOG, All rights reserved 24
  25. 25. Tips & Tricks – Display scheduling information from MS Project  IBM ILOG Elixir TaskChart control displays scheduling information  MS Project is a widespread tool for building schedules  How can your Flex/AIR application displays schedule coming from MS Project?  Follow these steps: 1. Export from MS Project using their XML format 2. Add an IBM ILOG Elixir TaskChart to your application 3. Read the XML in your AIR/Flex Application 4. Using E4X get information from the XML and populate the TaskChart with it:  Activities information  Constraints information (which activity must be completed before which one) 05/14/2009 © ILOG, All rights reserved 25
  26. 26. Tips & Tricks – Display scheduling information from MS Project 05/14/2009 © ILOG, All rights reserved 26
  27. 27. What's next? - Building on top of Flex 4  Adobe intends to release Flex 4 in fall 2009  What could we do? 1. Use FXG for skinning components/renders  You get that for free, check our blog for sample of styling an IBM ILOG Elixir 2.0 Gauge with FXG 2. Rebuild our components using Spark component model:  inheriting from FxComponent or FxDataContainer  accepting FXG Group for skins and ItemRenderer (extends Group) for item renderers 3. Integrate into Flash Catalyst?  should not be extensible in its first incarnation, need to wait for future version 05/14/2009 © ILOG, All rights reserved 27
  28. 28. What's next? - Leveraging Flash Player 10  Gumbo will require Flash Player 10 => we can rely on Flash Player 10 APIs for Okra  What can we do? 1. Use Vector.<> in place of Array:  Significant performance improvement on intensive Array-based computations like renderers layout computations (OrgChart) 2. Use Vector3D in 3D Charts:  Remove our own implementation => reduce SWF size, improve performance 3. Leverage 3D transformations in 3D Charts:  Remove several classes => reduce SWF size  Significant work compare to previous improvements 4. Leverage bidi text in all components?  Let's see how Adobe integrates bidi in Flex text component and use this  Will only be part of Flex 4.1 not 4.0 05/14/2009 © ILOG, All rights reserved 28
  29. 29. What's next? - What do you need from us?  You can help!  Please contribute at http://elixir-bugs.ilog.com and http://forums.ilog.com/elixir  Some external feedback examples taken from Jira / forums:  Resource / Task Chart printing  Resource Chart activities layout  Screen reader support  QTP support 05/14/2009 © ILOG, All rights reserved 29
  30. 30. Resources  Get more information & IBM ILOG Elixir 2.0 Free Trial on the Developer Center  http://www.ilog.com/dev/ilogelixir/  Discuss with other users and IBM ILOG Elixir Team on the forum  http://forums.ilog.com/elixir  Read IBM ILOG Elixir Team blog for regular updates and usage samples  http://blogs.ilog.com/elixir  Report issues on our Jira bug base  http://elixir-bugs.ilog.com 05/14/2009 © ILOG, All rights reserved 30
  31. 31. Questions & Answers Thank You © ILOG, All rights reserved

×