FusionCharts for Flex > Creating Widgets > Spark Charts > Spark/Win-Loss Chart > Configurations

In this section, we'll explain the process of configuring the various facets of the chart. We'll see how to:

Let's explain each one of them in detail.

 
Specify period blocks for the chart

FusionWidgets spark win/loss chart allows to show period blocks on the chart using colored bands. This helps you easily interpret periods on the chart. Assuming each game occurred once a week, if we want to show 3 weeks period block on the chart, we need to set:

<chart ... periodLength='3' periodColor='CCCCCC' periodAlpha='50'>

Here, we've set periodLength='3' as we've specified weekly data. So, 3 data points make 3 weeks. This will result in:

When specifying periods, make sure that your period length is always less than the number of data points that you've specified, as period length is directly numbered on data points.
 
Configure win, loss & draw colors

To configure the color for bars indicating win, loss & draw, set:

<chart ... winColor='00CC33' lossColor='FF0000' drawColor='000000' ...>

This will result in:

 
Configuring bar color for scoreless matches

FusionWidgets spark win/loss chart allows to highlight the matches that a team won/lost. Among the teams played one of them scored nothing at all. To display this data in chart, set:

<chart .... scoreLessColor='FF0000' ..>
...
<set value='W' scoreless='1'/>
...
</chart>

Here, we've added scoreless='1' attribute to <set> element and specified red color as the fill color for all the matches with no scores.

As you can see above, there's one bar (winning bar) colored in red indicating that the other side couldn't score in that match.
 
Hiding chart value

To hide the chart value, set:

<chart ... showValue='0' ...>

This will result in: