FusionCharts for Flex > Your First Chart > Simple Sales Chart

In the following sections we will be creating a simple sales chart in Flex using the FusionCharts for Flex. Examples for both the Flex Builder and the Flex SDK are given. Also, we would modify this basic example in the subsequent sections to add more functionality.

Note: You need to install FusionCharts for Flex before proceeding with this section. For information regarding installation see the installation types page.

Simple Sales Chart XML

Before we build the chart, we need to have the data to be represented on the chart. We're plotting half yearly sales summary for a given year, say 2008. Our data in tabular form would look something like the table below. We would build a Column 3D chart from this data. Each month given below would be represented on the chart as a 3D column.

Month Sales(2008)
January $17400
February $19800
March $21800
April $23000
May $29000
June $27600

FusionCharts for Flex internally needs its data in pre-defined XML format. So, we need to convert this data into XML.

You can use the visual XML Generator Utility of FusionCharts v3 pack to convert this tabular data into XML. This is explained in "Guide for General Users" section of FusionCharts v3 Documentation.

Further, to know more about the XML structure used in FusionCharts for Flex, please go through the Chart XML Reference section.

The converted XML data is shown below:

<chart caption='Half Yearly Sales Summary' subcaption='For the year 2008 - First Half'
   xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='Jan' value='17400' />
<set label='Feb' value='19800' />
<set label='Mar' value='21800' />
<set label='Apr' value='23000' />
<set label='May' value='29000' />
<set label='June' value='27600' />
</chart>

We punch the above code (you can copy paste the XML from above) into a text editor (e.g., Notepad) and save it as Data.xml inside the src folder.

And yeah - don't worry about whatever spaghetti stuff we have just written - we'll soon cover them. Basically, what we've done above can be listed in the following points:

  • We've created the root <chart> element, with a few attributes to define captions, axis names and number prefix character, to consist everything.
  • For each data row, we've created a <set> element. label attribute of this element represents the month name and value attribute represents the data that we want to plot.

Just as a measure to check if the XML document is structurally valid, open the file in your browser like Internet Explorer or Mozilla Firefox. You should be able to see the XML data document in a formatted way, without any errors.

And now, if you're running out of your patience to build the chart, let's quickly start that.

Note: FusionCharts for Flex allows you to provide chart data using XMLString, Array, XMLList or Model instead of manually converting the data into XML and then storing it in the hard disk every time. These will be discussed in the coming sections.

Building the Chart

First of all, we need to complete the basic setup, as discussed in the installation section. As a new project is created in Flex Builder, the following code will be displayed automatically in the source view:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"/>
</mx:Application>

Next, we switch over to the design view. In design view we would find a Custom component named FusionCharts in Component Window. We would undertake the following steps:

  1. We drag the FusionCharts custom component and drop it onto the stage. We would find a control with FusionCharts logo created in the stage.

  2. Next, we go to the Properties Window. Here, we select the "Category View" and choose the "FusionCharts" group.

  3. Then, from the drop down list we choose the value of FCChartType as "Column3D", the chart type we intend to render.

  4. We also choose the value of FCDataURL as "Data.xml". FCDataURL property sets the path of the XML file that contains chart data.

And, it's now time to fructify the efforts that we have put into creating our first chart. We run the project. The following chart is rendered.

chart

And we just proved how easy it is to create a chart using Flex. If we switch over to the source view, we would find that the following code is automatically generated:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" FCDataURL="Data.xml" FCChartType="Column3D"/>
</mx:Application>

As you can see in the highlighted section above, all the necessary informations have been set automatically. Hence, if you are code savvy, you can always avoid the design view's drag-drop mechanism and build the chart by writing the above code in the source view.