Simple chart shows a single data series, where a series is a group of related data points. For example, a data series might be a company profits. Another chart might be add a second data series. You might include the percentage growth of profits over the same business quarters.

Now, I assumed that you already have a Flex Builder Professional installed in your pc or you can go to Adobe website.

Flex charting controls lets you create some of the most common chart types, and also lets you customize the appearance of you charts. The charting controls are located in the mx.chart.* package.

The following tables lists the supported chart types, the name of the control class, and the name of the series class that you use to define what data appears in each chart.

In this example, will be using the Bar chart but before we begin lets try to look the BarChart and BarSeries Class description.

BarChart
The BarChart control represents data as a series of horizontal bars whose length is determined by values in the data. A BarChart control can represent different chart variations, including simple bars, clustered bars, stacked, 100% stacked, and high/low.

The BarChart control expects its series property to contain an array of BarSeries objects.

Stacked and 100% bar charts override the minField property of their BarSeries objects.

BarSeries
Defines a data series for a BarChart control. By default, this class uses BoxItemRenderer class. Optionally, you can define an itemRenderer for the data series. The itemRenderer must implement the IDataRenderer interface.

yField – Specifies the field of the data provider that determines the y-axis location of the base of each bar in the chart. If you omit this property, Flex arranges the bars in the order of the data in the data provider.

xField – Specifies the field of the data provider that determines the x-axis location of the end of each bar.

miniField – Specifies the field of the data provider that determines the x-axis location of the base of a bar. This property has no effect in overlaid, stacked, or 100% stacked charts. For more information on using the minField property.

The following example creates a simple BarChart control:

A bar chart is essentially a column chart rotated 90 degress clockwise; therefore, bar charts and column charts share many of the same characteristics. For more information please see the live doc in Adobe Flex, click here.

How to Load the XML?

MXML makes loading external files easy with the HTTPService tag. The HTTPService tag can have a single request tag under which the parameters can be specified. Insert the code below under the opening application tag.

Now you just created an HTTP Service with an id of “siteData” which links to the XML file in the assets folder. The results are formatted in e4x, which allow us to filter through the contents of the XML. In order for this url to be loaded, we must tell the application to send the request. Add the event “creationComplete” to the opening application tag.

When the page loads the creationComplete is called. In the above code when the page is finished loading then the HTTPService named “siteData” should be sent. You can test you application now without errors if the XML is being loaded correctly.

Will need a storage variable for XML data to store itself while we work it. Insert a script tag below the opening application tag and declare the following variable.

XMLList type allows us to load XML data in and access each node. Now creat a function that will load data from the XML file and display it in labels. Insert the code below in the script tag.

Insert some components below the HTTPService tag for the results. Will add buttons to control navigation.

Run your application. If everything is working as it should. When a button is pressed the data from the XML file is loaded up for each page. Try loading a url of an image from an XML file with Flex Builder 3. XML has a wide number of posibilities to explore.

See the live demo, click here.

First thing first, you must have Adobe Flex Builder 3 and Adobe AIR in your system. If you don’t have one click this link www.adobe.com.

Now, Create new MXML project File>New or shortcut key ALT+SHIFT+N (windows) then chose Flex Project. And type project name, I use HtmlWindow then in Application type chose Desktop application (runs in Adobe AIR) and then click finish. You’ll see a code in your window just like below:

Then insert this code:

The HTML control lets you display HTML content in your application, width and height is the size of your application, location property to specify the URL of an HTML page whose content is displayed in the control.

Now, the code should look like this:

Now lets test your application by pressing Run HTML button or go to RUN->RUN HTML or shorcut key CTRL+F11.

Next will add some navigation button, so that you can input url and also have a forward and back button. Ok now above HTML tag put a Horizontal Box. Inside that HBox tag, you’ll to have Label, TextInput and 3 buttons which is Go, Forward and Back. Your code should look like this:

For Label tag:

For textInput tag which have an id and called myText:

For 1st button which is label “Go There” and click attributes, location property will change the value of the control’s.

For 2nd & 3rd button which is label “Forward” and click attribute with historyForward() and historyBack() methods.

Your code now should look like this:

That’s it! Test again. I hope this tutorial is helpful to someone. Download the source file.