Click here to start the sample application.

I extracted this example from my Salesbuilder sample. The application is a simple sales pipeline. The X axis is a time axis, the Y axis represents the probability of closing deals (in percent), and the bubbles represent deals: the bigger the bubble, the bigger the deal.

The bubble chart features many “direct manipulation” options:

1. Grab the background of the chart with your mouse and scroll it left and write to navigate along the time axis.
2. Grab a vertical grid line, and move it left and right to zoom-out/zoom-in.
3. To modify your pipeline, grab a bubble with your mouse and move it up and down or left and right to adjust the probability and the expected closing date respectively

Flex to JavaScript:
When you move bubbles, the Flex application invokes a JavaScript method to update the Projected Revenue which is displayed in plain HTML on the page.

JavaScript to Flex:
You can also add opportunities (deals) using the HTML form at the bottom of the page.
For example, specify “Adobe” as the account, “Big Deal” as the project name, 500000 as the expected revenue, “50” as the days to close, and “70” as the probability.
When you click “Add Opportunity”, we use JavaScript to invoke the addOpportunity() method in the Flex application.

In this example, I use ExternalInterface to communicate between Flex and JavaScript. You can also use the Flex Ajax bridge which provides a higher level API and which is now integrated in FlexBuilder (version 3).

Click here to download the source code.

No rocket science here… just another example of a hybrid application.

I experimented with the 3D charts components which definitely provide a good example of the expressiveness of the Flex platform. Looking at the sample code, it looks like you can’t simply enable the 3D mouse interactivity (click and drag to rotate, mouse wheel to zoom in / zoom out) by setting a component property: you actually have to write some code, capture mouse events, etc… In my own experimentation, I isolated that code in a reusable Chart3DControl component that makes it easy to provide this kind of mouse interactivity in any component in your application.

Click here to launch my simple test application… an AdvancedDataGrid (providing row grouping) and a 3D ColumnChart: Click an item in the AdvancedDataGrid to visual drill-down using the 3D column chart. This application works with just 35 lines of code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
	creationComplete="srv.send()">

	<mx:HTTPService id="srv" url="catalog.xml" result="gc.refresh()"/>

	<mx:AdvancedDataGrid id="dg" width="100%" height="40%">
                <mx:dataProvider>
                        <mx:GroupingCollection id="gc" source="{srv.lastResult.catalog.product}">
                             <mx:Grouping>
                                  <mx:GroupingField name="series"/>
                             </mx:Grouping>
                        </mx:GroupingCollection>
                </mx:dataProvider>
                <mx:columns>
			<mx:AdvancedDataGridColumn dataField="name"/>
			<mx:AdvancedDataGridColumn dataField="price"/>
		</mx:columns>
	</mx:AdvancedDataGrid>

	<local:Chart3DControl chart="{chart}"/>

	<ilog:ColumnChart3D id="chart" width="100%" height="60%"
		dataProvider="{dg.selectedItem.revenue}">
		<ilog:horizontalAxis>
			<mx:CategoryAxis categoryField="month"/>
		</ilog:horizontalAxis>
		<ilog:series>
			<ilog:ColumnSeries3D yField="europe"/>
			<ilog:ColumnSeries3D yField="na"/>
			<ilog:ColumnSeries3D yField="asia"/>
		</ilog:series>
    </ilog:ColumnChart3D>

</mx:Application>

Click here to download the source code.

I’m also thinking about integrating the Org Chart component into Salesbuilder.

Click here to install the application.

Click here to download the source code.

Follow this script for a guide tour of the application.