Creating the XML data document for the Chart | ||||||||||||||
Before we build the chart, we need to have the data to be represented on the chart. Since we're plotting half yearly sales summary for a given year, say 2008, our data in tabular form would look something like below. Each month given below would be represented on the chart as a 3D column. |
||||||||||||||
|
||||||||||||||
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"FusionCharts and XML » 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 can build the chart either from design view or by entering code into the source view. In the design view, we can build the chart following the way described in the page "Simple Sales Chart " under "Your First Chart" section. Here, we need to set the value for FCChartType and FCDataURL as "Column3D" and "Data.xml" respectively. |
||||||||||||||
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"/> </mx:Application FCDataURL="Data.xml" FCChartType="Column3D"> |
||||||||||||||
As you can see above, we have only set the chart type and provided appropriate chart data. That's it. Now, if you run the code, you will get a chart as the image below shows. |
||||||||||||||
![]() |