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

© ILOG, All rights reserved

Flex Enterprise & Data Visualization: Going one step further with

IBM ILOG Elixir

May 18, 2009

Christophe [email protected]

http://blogs.ilog.com/elixir/author/cjolif

mailto:[email protected]

mailto:[email protected]

05/14/2009 © ILOG, All rights reserved 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


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

Heat Maps

Gauges and Dials

Digital Indicators (new in 2.0)

Demo

Demo

http://visudemos.ilog.com/tourdeflex/TdFDashboard/TourDeFlexDashboard.html

http://visudemos.ilog.com/tourdeflex/TdFDashboard/TourDeFlexDashboard.html



Calendar (new in 2.0)Demo

Gantt Resource ChartDemo

Gantt Task Chart (new in 2.0)

Demo



Organization ChartDemo

TreemapDemo



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

http://www.adobe.com/devnet/flex/tourdeflex/web












http://forums.ilog.com/elixir


http://blogs.ilog.com/elixir



Tips & Tricks – From 2D to 3D Charts

Original:<mx:ColumnChart id="column" showDataTips="true" dataProvider="{medalsAC}" > <mx:horizontalAxis> <mx:CategoryAxis categoryField="Country"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" /> <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" /> <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" /> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{column}"/>



Result:<ilog:ColumnChart3D id="column" showDataTips="true" dataProvider="{medalsAC}" > <ilog:horizontalAxis> <mx:CategoryAxis categoryField="Country"/> </ilog:horizontalAxis> <ilog:series> <ilog:ColumnSeries3D xField="Country" yField="Gold" displayName="Gold" fill="{sc1}" stroke="{s1}" /> <ilog:ColumnSeries3D xField="Country" yField="Silver" displayName="Silver" fill="{sc2}" stroke="{s2}" /> <ilog:ColumnSeries3D xField="Country" yField="Bronze" displayName="Bronze" fill="{sc3}" stroke="{s3}" /> </ilog:series> </ilog:ColumnChart3D> <mx:Legend dataProvider="{column}"/>



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="0xFFFFFF"> <ilog:scales> <ilog:CircularLinearScale maximum="250" id="speedScale" startAngle="200" endAngle="340"/> <ilog:CircularLinearScale maximum="100" id="fuelScale" startAngle="140" endAngle="40" majorTickInterval="50" minorTickInterval="25" /> </ilog:scales> <ilog:elements> <ilog:CircularGaugeAsset asset="@Embed(source='black_circle.swf')"/> <ilog:CircularScaleRenderer radius="35%" scale="{speedScale}" labelRadius="102%" labelPlacement="outside" minorTickLength="10%" labelFontSize="12%" fontWeight="bold" majorTickRenderer="{myTickRenderer}" minorTickRenderer="{myTickRenderer}" /> <ilog:CircularTrackRenderer minimum="150" maximum="250" radius="28%" scale="{speedScale}"> <ilog:gradientEntries> <mx:GradientEntry color="0x00DD00" ratio="0"/> <mx:GradientEntry color="0xDDD000" ratio="0.5"/> <mx:GradientEntry color="0xDD0000" ratio="1"/> </ilog:gradientEntries> </ilog:CircularTrackRenderer> <ilog:NeedleRenderer thickness="7%" radius="30%" value="{speed.value}" scale="{speedScale}"/>  </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 collapsed2.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 ICollectionView2.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 format2. Import it in IBM ILOG Elixir Custom Map Converter3. Set Parameters 4. Export it as ActionScript5. Include it in your Flex Builder Project6. 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 "events" 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 "Place" API We request to Flickr photos over a particular "Place" 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 format2. Add an IBM ILOG Elixir TaskChart to your application3. Read the XML in your AIR/Flex Application4. 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 FXG2. Rebuild our components using Spark component model:

inheriting from FxComponent or FxDataContainer accepting FXG Group for skins and ItemRenderer (extends

Group) for item renderers3. 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

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

http://elixir-bugs.ilog.com/





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

http://www.ilog.com/dev/ilogelixir/

http://www.ilog.com/dev/ilogelixir/







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

Technology

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