Pallav Nadhani

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

Step 3: Updating the gauges in real time

As indicated by the initialization code (above), the task of updating the gauges with current data acquired from the feed, is carried out by the updateWidgets() method. The updateWidget() method updates both the values and the labels of each gauge.

// initiailze a new feed
channel = e.result.rss.channel;

//retrieve the wind chill 
var wc:Number = Number(channel.wind.chill);

The above code assigns the feed's channel to a local object. Following which, it retrieves the wind-chill factor from that object.

Each gauge object is updated using FCSetData method in the following manner:

// FCSetData(value:Number)
windChill.FCSetData(wc);

In case of a linear or an angular gauge the FCSetData method is declared in the following manner:

// FCSetData(dialIndex:Number, value:Number)
windSpeed.FCSetData(1,wd);

The above code sets the value of the dial 1 to wd.

Step 4: Dynamic forecast panel with user editable gauge (slider)

The data displayed on the widgets depends on the status of the editable gauge which allows the user to view either today's or tomorrow's weather. The editable gauge is essentially a linear gauge which has been made editable. A gauge can be made editable by declaring the XML attribute editMode='1'.

<chart editMode='1' ... >
   ...
</chart>

The status of the gauge's slider is tracked with the help of an event listener which monitors the FCChartUpdateedEvent event. The event tracking code has been discussed previously as a part of the initialization code.

// track changes made in the forecast panel
daySelector.addEventListener("FCChartUpdatedEvent", changeForecast);

Following is the core function that powers the entire interface:

private function changeForecast(e:FCEvent):void {
    // determine where the pointer is pointing
    forecast = (daySelector.FCGetData(1) > 1.5)?1:0;
    //snapthe pointer to one position
    daySelector.FCSetData(1,forecast+1);
    // sets the values in the forecast panel
    setForecastPanel();
}

The FCGetData method attached to each gauge object acquires the current data and updates the gauge accordingly. The forecast variable is a root level variable which is used as an index for setting the values of the labels and gauges in the forecast panel.

Step 5: Zip code changing functionality

In order to change the information with respect to the location, we make a small panel where the zip-code can be provided. The components of the zip-code panel are configured with help of the follwing code:

// text input field
<mx:TextInput id="zipfield" ... />

// submit button
<mx:Button id="submitZip" click="changeZip()" ... />

The zip-code panel contains a text field and a submit button. The click event of the submit button invokes the changeZip() method, which in turn calls the changeZip(zip:Number) method of the YahooWeather class and then updates the feed. The ZipValidator object associated with the text field checks for errors in the zip code entered by the user.

Step 6: Running the final application

The weather widget application is ready for use. To try it out, just download the complete application source code, set up the project, compile the WeatherWidget.mxml file and run the application.

When you run the application, by default the it shows the weather data for Sunnyvale, California. Just enter the zip-code of the location you want to switch to and press 'Submit', and just watch the magic happen.

Conclusions

As always, using Flex we have created in hours what would have otherwise taken days to create. And thanks to all the gauges available from FusionCharts for Flex we didn't have to build any custom components either. Especially with the custom tags support you can seemlessly integrate gauges into your Flex applications. So go ahead and enjoy your new weather widget. Or better yet, go and create another application with Flex and FusionCharts!