Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

As an example, we will create a spark line chart that shows the stock price fluctuations.

A spark chart created to show the stock price looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Stock Price", "subcaption": "Last month", "canvasleftmargin": "145", "showBorder": "0", "bgColor": "#ffffff", "captionPadding": "7", "valuePadding": "7", "numberPrefix": "$" }, "dataset": [ { "data": [ { "value": "38.42" }, { "value": "41.43" }, { "value": "34.78" }, { "value": "40.67" }, { "value": "44.12" }, { "value": "38.45" }, { "value": "40.71" }, { "value": "49.90" }, { "value": "40.12" }, { "value": "34.91" }, { "value": "42.02" }, { "value": "35.21" }, { "value": "43.31" }, { "value": "40.21" }, { "value": "40.54" }, { "value": "40.90" }, { "value": "54.21" }, { "value": "41.90" }, { "value": "33.43" }, { "value": "46.73" }, { "value": "50.42" }, { "value": "40.74" }, { "value": "42.31" }, { "value": "50.39" }, { "value": "51.10" }, { "value": "44.84" }, { "value": "51.64" }, { "value": "47.62" }, { "value": "39.61" }, { "value": "35.13" } ] } ] }
{
    "chart": {
        "caption": "Stock Price",
        "subcaption": "Last month",
        "canvasleftmargin": "145",
        "showBorder": "0",
        "bgColor": "#ffffff",
        "captionPadding": "7",
        "valuePadding": "7",
        "numberPrefix": "$"
    },
    "dataset": [
        {
            "data": [
                {
                    "value": "38.42"
                },
                {
                    "value": "41.43"
                },
                {
                    "value": "34.78"
                },
                {
                    "value": "40.67"
                },
                {
                    "value": "44.12"
                },
                {
                    "value": "38.45"
                },
                {
                    "value": "40.71"
                },
                {
                    "value": "49.90"
                },
                {
                    "value": "40.12"
                },
                {
                    "value": "34.91"
                },
                {
                    "value": "42.02"
                },
                {
                    "value": "35.21"
                },
                {
                    "value": "43.31"
                },
                {
                    "value": "40.21"
                },
                {
                    "value": "40.54"
                },
                {
                    "value": "40.90"
                },
                {
                    "value": "54.21"
                },
                {
                    "value": "41.90"
                },
                {
                    "value": "33.43"
                },
                {
                    "value": "46.73"
                },
                {
                    "value": "50.42"
                },
                {
                    "value": "40.74"
                },
                {
                    "value": "42.31"
                },
                {
                    "value": "50.39"
                },
                {
                    "value": "51.10"
                },
                {
                    "value": "44.84"
                },
                {
                    "value": "51.64"
                },
                {
                    "value": "47.62"
                },
                {
                    "value": "39.61"
                },
                {
                    "value": "35.13"
                }
            ]
        }
    ]
}
<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: 'sparkline',
    renderAt: 'chart-container',
    width: '450',
    height: '50',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Stock Price",
            "subcaption": "Last month",
            "canvasleftmargin": "145",
            "showBorder": "0",
            "bgColor": "#ffffff",
            "captionPadding": "7",
            "valuePadding": "7",
            "numberPrefix": "$"
        },
        "dataset": [{
            "data": [{
                "value": "38.42"
            }, {
                "value": "41.43"
            }, {
                "value": "34.78"
            }, {
                "value": "40.67"
            }, {
                "value": "44.12"
            }, {
                "value": "38.45"
            }, {
                "value": "40.71"
            }, {
                "value": "49.90"
            }, {
                "value": "40.12"
            }, {
                "value": "34.91"
            }, {
                "value": "42.02"
            }, {
                "value": "35.21"
            }, {
                "value": "43.31"
            }, {
                "value": "40.21"
            }, {
                "value": "40.54"
            }, {
                "value": "40.90"
            }, {
                "value": "54.21"
            }, {
                "value": "41.90"
            }, {
                "value": "33.43"
            }, {
                "value": "46.73"
            }, {
                "value": "50.42"
            }, {
                "value": "40.74"
            }, {
                "value": "42.31"
            }, {
                "value": "50.39"
            }, {
                "value": "51.10"
            }, {
                "value": "44.84"
            }, {
                "value": "51.64"
            }, {
                "value": "47.62"
            }, {
                "value": "39.61"
            }, {
                "value": "35.13"
            }]
        }]
    }
}
);
    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 line chart:

Attribute Name Description

value

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

Top