Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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..
{ "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"
                }
            ]
        }
    ]
}
<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: 'sparkcolumn',
    renderAt: 'chart-container',
    width: '300',
    height: '80',
    dataFormat: 'json',
    dataSource: {
        "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"
            }]
        }]
    }
}
);
    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 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.

Top