Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

As an example, we will create a spark win/loss chart to show the score-card of Bobby Fischer (vs. Spassky) from the World Chess Championship of 1972.

A spark win/loss chart rendered to show Bobby Fischer’s score-card 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" }, "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"
    },
    "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"
        },
        "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 render a spark win/loss chart:

Attribute Name Description

value

It is used to show the value for a column on the spark win/loss chart. This attribute takes the values W, L, and D. W indicates win, L indicates loss, D indicates draw, e.g. W.

Top