FusionCharts for Flex > Creating Widgets > Spark Charts > Spark Column > Simple Example

In this section we are going to create a simple spark column chart to display the monthly revenue of a fictional company for one year.

Creating the XML

XML Data
We will be creating a XML called Data.xml in the same location as our MXML apllication. The XML data for the chart would look as under:
<chart palette='2' caption='Revenue' subcaption='12 months' numberPrefix='$' highColor='00CC33' lowColor='CC0000'>
   <dataset>
      <set value='783000' />
      <set value='201000' />
      <set value='515000' />
      <set value='115900' />
      <set value='388000' />
      <set value='433000' />
      <set value='910000' />
      <set value='198000' />
      <set value='183300' />
      <set value='162000' />
      <set value='159400' />
      <set value='185000' />
   </dataset>
</chart>

In the above XML, we have:

  • Created the <chart> element, which is the root element of each chart.
  • Specified the caption & sub-caption, palette number, number prefix. We've also asked the chart to color the highest and lowest month columns using different colors. You can specify a lot more properties for the <chart> element, which have been discussed in next sections.
  • Added the <dataset> element to contain data. Each spark column chart XML can have only <dataset> element, under which individual data points can be specified using <set value='23400' />.

When you now view the chart, you'll get an image similar to the one shown below.

Next, we'll see how to configure the various aspects of this chart.

Building the Chart

We will assume that you already have a project open and an MXML application, where you are ready to insert your chart. Begin by switching to the Design View in your MXML application. Here you'll find a custom component named FusionWidgets in the Components window. Next, follow the steps listed below.

  1. Drag the FusionWidgets custom component and drop it onto the stage. You will find that a control with FusionWidgets logo has been created on the stage.

  2. Next, switch to the Flex Properties window, select the Category View option and then choose the FusionCharts group.

  3. Select SparkColumn as the value of FCChartType from the drop-down list.

  4. Select Data.xml as the value of FCDataURL from the drop-down list. FCDataURL property sets the path of the XML file.

The equivalent code in Source view should be:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:ns1="com.fusionwidgets.components.*"
>
...
  <ns1:FusionWidgets x="10" y="10" FCDataURL="Data.xml" FCChartType="SparkColumn" width="290" height="40"/> ...
</mx:Application>

The file Data.xml is our previously created XML file. The file should be present in the same location as your MXML file. If not, you should specify the path of the file in the FCDataURL property. If you do not wish to create a separate XML data file, you can also bind the data as a string to the FCDataXML property.