Using Flex To Chart Data

Charting is a great intersection between the API access and Flex's RIA capabilites.  With, you can access your data easily with SOAP or REST, and the you can license Flex to have out of the box charting components which are easy to use and potentially quite powerful for visualizing data.

The only real trick to utilizing Flex charts for your data is organizing the information in a manner that makes sense to the chart.  If you, for instance were pulling all of the CampaignMembers from a specific Campaign, you'd use SOQL similar to this:

SELECT ID, Campaign.Name, FirstRespondedDate, Lead.Country, Lead.DeveloperJobRole__c, Lead.DeveloperInterest__c from CampaignMember

Which, with whatever filters and limits you have, would bring back a set of records with those specific fields. Charts, however, expect a simple name/value pair to associate with the rendering.  So if you have 23 rows with United Kingdom, and 84 with the United States, the standard PieChart component could take an ArrayCollection with the following makeup:

[{Country:"United Kingdom", Size: 23}, {Country:"United States", Size 84}]

To properly generate the view.  Essentially you end up with a three step process: 1) retrieve the complete set of data you need from SOQL. 2) Iterate through those records and aggregate the amounts you want to chart into their own ArrayCollection.  3) Associate those ArrayCollections with the specific nameField, field and displayName with a chart component.  For instance, the above ArrayCollection could be associated with a PieChart component directly from ActionScript using:

chart.nameField = "Country";

chart.field = "Size";

chart.displayName = "Registrants by Country";

And you can do this dynamically, meaning you can reuse the same Flex chart components by reassigning the dataProvider and the above fields, which is more lightweight than maintaining several or creating new ones on the fly.  

Since Flex Charts have many built-in pieces of functionality, like data point hovers, selectable components to drill into other charts, customizable layouts – they're perfect for taking charts to the next level when needed – and provides a powerful business and data layer to power them with.   Next week <a href="">360Flex</a> rolls into Denver, and there are a few seats left if you can get to the area.  There will be cool ActionScript tricks than you can shake a stick at, and I've got an hour to talk Chatter, mobile and Flex there on Wednesday.  After I get back, I'll have some wrapup which will include using OAuth2 and REST with Flex as well.





April 8, 2011

Leave your comments...

Using Flex To Chart Data