FusionCharts for Flex > Creating Widgets > Spark Charts > Win/Loss Chart > Simple Example

In this section, we'll create a simple spark win/loss chart to display the performance of Yankees for this season.

Creating the XML

XML Data
We will be creating a XML called Data.xml in the same location as our MXML apllication. Our fictional season's data can be converted into XML as under:
<chart caption='Yankees' subcaption='Current season' >
   <dataset>
      <set value='W' />
      <set value='W' />
      <set value='D' />
      <set value='L' />
      <set value='W' />
      <set value='W' />
      <set value='L' />
      <set value='L' />
      <set value='W' />
      <set value='L' />
      <set value='W' scoreless='1'/>
      <set value='L' />
      <set value='W' />
      <set value='W' />
   </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. 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 win/loss chart XML can have only <dataset> element, under which individual data points can be specified using <set value='W' />.
  • Set value can be of 3 types:
    • W - Indicating a win
    • L - Indicating a loss
    • D - Indicating a draw

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 AngularGauge 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="SparkWinLoss" width="210" 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.