Loading
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:
Given below is a brief description of the attributes used to define period blocks:
| Attribute Name | Description |
|---|---|
|
It is used to specify the number of data points that each period block will encapsulate. |
|
It is used to specify the hex code for the color that will be used to render the period block, e.g. #CCCCCC. |
|
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:
{
"chart": {
"theme": "fint",
"caption": "Bobby Fischer (vs. Spassky)",
"subcaption": "World Chess Championship 1972",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"chartBottomMargin": "20",
"periodlength": "3",
"periodcolor": "#cccccc",
"periodalpha": "90"
},
"dataset": [
{
"set": [
{
"value": "L"
},
{
"value": "L"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "L"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "W"
}
]
}
]
}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:
Given below is a brief description of the attributes used to configure the win, loss, and draw colors:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the fill color for the bars indicating win, e.g. #ACDE34. |
|
It is used to specify the hex code of the fill color for the bars indicating loss, e.g. #ACB534. |
|
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:
{
"chart": {
"theme": "fint",
"caption": "Bobby Fischer (vs. Spassky)",
"subcaption": "World Chess Championship 1972",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"chartBottomMargin": "20",
"winColor": "#00cc33",
"lossColor": "#cc0000",
"drawColor": "#0075c2"
},
"dataset": [
{
"data": [
{
"value": "L"
},
{
"value": "L"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "L"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "W"
}
]
}
]
}Configuring Colors to Show Scoreless Matches
A spark win-loss chart with a color configured to show scoreless matches looks like this:
Given below is a brief description of the attribute used to configure a color for scoreless matches:
| Attribute Name | Description |
|---|---|
|
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:
{
"chart": {
"theme": "fint",
"caption": "Argentina (Last 10 Matches)",
"subcaption": "2014 FIFA World Cup",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"chartBottomMargin": "20",
"scoreLessColor": "#aa0000"
},
"dataset": [
{
"data": [
{
"value": "W"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "L",
"scoreless": "1"
}
]
}
]
}Showing/Hiding Chart Value
A spark win-loss chart with the chart value hidden looks like this:
Given below is a brief description of the attribute used to show/hide the chart value:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the chart value will be shown. Setting this attribute to |
The data structure needed to hide the chart value is given below:
{
"chart": {
"theme": "fint",
"caption": "Bobby Fischer (vs. Spassky)",
"subcaption": "World Chess Championship 1972",
"showValue": "0",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"chartBottomMargin": "20"
},
"dataset": [
{
"data": [
{
"value": "L"
},
{
"value": "L"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "L"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "W"
}
]
}
]
}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:
Given below is a brief description of the attributes used to configure the hover effect for a spark win-loss chart:
| Attribute Name | Description |
|---|---|
|
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. |
|
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. |
|
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. |
|
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:
{
"chart": {
"theme": "fint",
"caption": "Bobby Fischer (vs. Spassky)",
"subcaption": "World Chess Championship 1972",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"chartBottomMargin": "20",
"winHoverColor": "#49b6fe",
"lossHoverColor": "#55e395",
"drawHoverColor": "#ba9803",
"scoreLessHoverColor": "#cccccc"
},
"dataset": [
{
"data": [
{
"value": "L"
},
{
"value": "L"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "L"
},
{
"value": "D"
},
{
"value": "W"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "D"
},
{
"value": "W"
}
]
}
]
}There! You have now seen how you can configure the functional and cosmetic properties of a spark win-loss chart.