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

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

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

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



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

 Radar / Spider Chart
Demo

 OLAP and Pivot Charts
(new in 2.0)
Demo



 Maps for Dashboards
Demo
 Heat Maps

 Gauges and Dials

Demo
 Digital Indicators (new in 2.0)



 Calendar (new in 2.0)
Demo

 Gantt Resource Chart
Demo

 Gantt Task Chart (new in
2.0)
Demo



 Organization Chart
Demo

 Treemap
Demo



 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)



 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


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;
<mx:ColumnSeries xField=quot;Countryquot; yField=quot;Bronzequot; displayName=quot;Bronzequot;
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider=quot;{column}quot;/>


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;
<ilog:ColumnSeries3D xField=quot;Countryquot; yField=quot;Silverquot; displayName=quot;Silverquot;
<ilog:ColumnSeries3D xField=quot;Countryquot; yField=quot;Bronzequot; displayName=quot;Bronzequot;
</ilog:series>
</ilog:ColumnChart3D>
<mx:Legend dataProvider=quot;{column}quot;/>



 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…)


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


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;/>

</ilog:elements>
</ilog:CircularGauge>

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!


Tips & Tricks – Expand/Collapse on the OrgChart


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!


Tips & Tricks – Create a custom Map dashboard


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...)



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



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


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


Tips & Tricks – Density Heatmap of Flickr photos


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)


Tips & Tricks – Display scheduling information from MS Project


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


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


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


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


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

Recomendados

Recomendados

Mais conteúdo relacionado

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

Semelhante a Christophe Jolif - Flex Data Visualization going one step further with IBM ILOG Elixir (20)

Mais de 360|Conferences

Mais de 360|Conferences (20)

Último

Último (20)

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