Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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 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" } ] } ] }
{
    "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

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.

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" } ] } ] }
{
    "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

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.

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" } ] } ] }
{
    "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

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.

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" } ] } ] }
{
    "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

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.

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" } ] } ] }
{
    "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

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.

Top