How to create interactive gauges in Adobe Flex and connect them to dynamic data sources?
Pallav Nadhani has been working with Flash and Flex ever since the days of Flash 4. He currently heads the engineering team of FusionCharts which specializes in building data-visualization components for web.View all articles by Pallav Nadhani
Rich Internet Applications (RIAs) are the order of the day for web developers. Visually stimulating, intelligent and interactive, these applications help you enhance the user experience tremendously. Adobe Flex has been a great enabler to create such RIAs with great ease. Using its extensive framework and ready to use components, coupled along with some third party controls, developers can now build a myriad of solutions in no time at all.
In this article, I'll demonstrate how to create an interactive weather dashboard in Adobe Flex. Dashboards can be of many types - financial, manufacturing, retail, health etc. I have chosen weather dashboard as an example as it is domain agnostic, calls for varied type of data visualization, and is easy to understand. Another reason is that it allows us to connect to external data sources, Yahoo! Weather RSS Feed in our case, and then build the output based on such values.
To build interactive gauges, I've used FusionCharts for Flex – a third party data visualization component for Flex that helps developers build charts and gauges in Flex. This is because Adobe Flex does not natively provide such data visualization components, and building one from scratch can be time consuming and expensive. The application will essentially be a dashboard which consists of various gauges that are updated through a live feed.
Let's begin by taking a look at what our end dashboard would look like. You can see the live version of it here.
Not exactly like your every day weather widget application, but it covers the most of what the feed has to offer.
The dashboard is made up of four types of gauges, which are updated in real time, with data acquired from the live feed. The dashboard also contains some standard Flex controls that are also updated in real-time. An editable gauge (the slider) has been provided to allow users to toggle between today's and tomorrow's weather.
Now that we have seen the application, let's see how it works. The following diagram shows the component architecture of the application:
As suggested by the diagram, the application comprises of the following main parts:
- FusionCharts for Flex, to provide the gauge components. Gauges in FusionCharts for Flex are called FusionWidgets.
- The YahooWeather service that provides live data feed
- The main weather widget application which serves as an interface between the data feed and the other components.