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 column chart that shows the monthly revenue.

A spark column chart that shows the monthly revenue looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to create a simple spark column chart:

Attribute Name Description

value

It is used to show the numerical value for a data plot on the spark column chart, e.g. 783000. This attribute belongs to the data object, which in turn belongs to the dataset object.

The data structure needed to render a spark column chart to show the monthly revenue is given below:

{ "chart": { "theme": "fint", "caption": "Revenue by Month", "subcaption": "Last year", "subCaptionFontSize": "11", "numberPrefix": "$", "highColor": "#6baa01", "lowColor": "#e44a00", "chartBottomMargin": "30" }, "dataset": [ { "data": [ { "value": "783000" }, { "value": "601000" }, { "value": "515000" }, { "value": "315900" }, { "value": "388000" }, { "value": "433000" }, { "value": "910000" }, { "value": "798000" }, { "value": "483300" }, { "value": "562000" }, { "value": "359400" }, { "value": "485000" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Revenue by Month",
        "subcaption": "Last year",
        "subCaptionFontSize": "11",
        "numberPrefix": "$",
        "highColor": "#6baa01",
        "lowColor": "#e44a00",
        "chartBottomMargin": "30"
    },
    "dataset": [
        {
            "data": [
                {
                    "value": "783000"
                },
                {
                    "value": "601000"
                },
                {
                    "value": "515000"
                },
                {
                    "value": "315900"
                },
                {
                    "value": "388000"
                },
                {
                    "value": "433000"
                },
                {
                    "value": "910000"
                },
                {
                    "value": "798000"
                },
                {
                    "value": "483300"
                },
                {
                    "value": "562000"
                },
                {
                    "value": "359400"
                },
                {
                    "value": "485000"
                }
            ]
        }
    ]
}

There! You have now seen how you can create a simple spark column chart.

Top