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:
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 will load here..
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'sparkwinloss',
renderAt: 'chart-container',
width: '400',
height: '60',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Bobby Fischer (vs. Spassky)",
"subcaption": "World Chess Championship 1972",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"chartBottomMargin": "20",
//Setting period length (Period defined as a set of 3 match)
"periodlength": "3",
//Defining period color
"periodcolor": "#cccccc",
//Setting period transparency
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |
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 will load here..
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'sparkwinloss',
renderAt: 'chart-container',
width: '400',
height: '60',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Bobby Fischer (vs. Spassky)",
"subcaption": "World Chess Championship 1972",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"chartBottomMargin": "20",
//Configuring win color (In this case success)
"winColor": "#00cc33",
//Configuring loss color (In this case failure)
"lossColor": "#cc0000",
//Configuring draw color
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |
Configuring Colors to Show Scoreless Matches
A spark win-loss chart with a color configured to show scoreless matches looks like this:
FusionCharts will load here..
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'sparkwinloss',
renderAt: 'chart-container',
width: '300',
height: '60',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |
Showing/Hiding Chart Value
A spark win-loss chart with the chart value hidden looks like this:
FusionCharts will load here..
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'sparkwinloss',
renderAt: 'chart-container',
width: '400',
height: '60',
dataFormat: 'json',
dataSource: {
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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 |
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 will load here..
{
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'sparkwinloss',
renderAt: 'chart-container',
width: '400',
height: '60',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Bobby Fischer (vs. Spassky)",
"subcaption": "World Chess Championship 1972",
"subCaptionFontSize": "11",
"numberPrefix": "$",
"chartBottomMargin": "20",
//Configuring hover effects color attributes
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. |