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 line chart that shows the stock price fluctuations.

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

FusionCharts will load here..

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.

The data structure needed to create a spark line chart is given below:

{ "chart": { "caption": "Stock Price", "subcaption": "Last month", "canvasleftmargin": "145", "canvasBottomMargin": "50", "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",
        "canvasBottomMargin": "50",
        "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"
                }
            ]
        }
    ]
}

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

Top