Configuring Spark Win/Loss Charts

FusionCharts Suite XT allows you to configure the functional and cosmetic properties of spark win-loss charts to improve representation.

In this section, you will be shown how you can:

  • Configure period blocks

  • Configure win, loss, and draw colors

  • Configure colors to show matches with no scores by a side

  • Show/hide chart value

  • Configure hover effects

Configuring Period Blocks

You can show period blocks on the chart using colored bands. This helps you easily interpret periods on the chart.

A spark win-loss chart configured to show period blocks of three matches looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to define period blocks:

Attribute Name Description
periodLength It is used to specify the number of data points that each period block will encapsulate.
periodColor It is used to specify the hex code for the color that will be used to render the period block, e.g. #CCCCCC.
periodAlpha It is used to specify the transparency for the period block. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 60.

The data structure needed to configure period blocks of three matches for the spark win-loss chart is given below:

...

When configuring period blocks, ensure that the period length is always less than the number of data points that you have specified, as period length is directly numbered on data points.

Configuring Win, Loss, and Draw Colors

A spark win-loss chart with the win, loss, and draw colors configured looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the win, loss, and draw colors:

Attribute Name Description
winColor It is used to specify the hex code of the fill color for the bars indicating win, e.g. #ACDE34.
lossColor It is used to specify the hex code of the fill color for the bars indicating loss, e.g. #ACB534.
drawColor It is used to specify the hex code of the fill color for the bars indicating draw, e.g. #12DE34.

The data structure needed to configure the win, loss, and draw colors is given below:

...

Configuring Colors to Show Scoreless Matches

A spark win-loss chart with a color configured to show scoreless matches looks like this:

FusionCharts should load here..

Given below is a brief description of the attribute used to configure a color for scoreless matches:

Attribute Name Description
scoreLessColor It is used to specify the hex code of the fill color for the bars indicating a match with no score on either side, e.g. #444444.

The data structure needed to configure a color for scoreless matches is given below:

...

Showing/Hiding Chart Value

A spark win-loss chart with the chart value hidden looks like this:

FusionCharts should load here..

Given below is a brief description of the attribute used to show/hide the chart value:

Attribute Name Description
showValue It is used to specify whether the chart value will be shown. Setting this attribute to 0 hides the chart value, setting it to 1 (default) shows it.

The data structure needed to hide the chart value is given below:

...

Configuring Hover Effects

You can use hover effects to improve the visual representation of your gauge.

A spark win-loss chart configured to enable hover effects looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the hover effect for a spark win-loss chart:

Attribute Name Description
winHoverColor It is used to specify the hex code of the fill color for the ‘win’ bar when the mouse pointer is hovered over it, e.g. #4AB6FE.
lossHoverColor It is used to specify the hex code of the fill color for the ‘loss’ bar when the mouse pointer is hovered over it, e.g. #4336FE.
drawHoverColor It is used to specify the hex code of the fill color for the ‘draw’ bar when the mouse pointer is hovered over it, e.g. #3AB6CD.
scoreLessHoverColor It is used to specify the hex code of the fill color for the ‘no score’ bar when the mouse pointer is hovered over it, e.g. #AC3456.

The data structure needed to configure hover effects for the spark win-loss chart is given below:

...

There! You have now seen how you can configure the functional and cosmetic properties of a spark win-loss chart.