Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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..

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.

The data structure needed to render a spark win/loss chart to show Bobby Fischer’s score-card is given below:

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

There! You have now seen how you can create a simple spark win/loss chart.

Top