Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT allows you to configure the functional and cosmetic properties of the spark line chart.

In this section, you will be shown how you can:

Defining Period Blocks for the Chart

You can show period blocks on a spark line chart using colored bands, helping you to easily interpret the periods on the chart.

A spark line chart configured to show a period block looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30", "periodlength": "7", "periodcolor": "#cccccc", "periodalpha": "50" }, "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": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30",
        "periodlength": "7",
        "periodcolor": "#cccccc",
        "periodalpha": "50"
    },
    "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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30",
            //Setting period length (Weekly period set to 7)
            "periodlength": "7",
            //Defining period color
            "periodcolor": "#cccccc",
            //Setting period transparency
            "periodalpha": "50",
        },
        "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 attributes used to define period blocks:

Attribute Name Description

periodLength

It is used to specify the number of data points that each period block will encapsulate.

periodColor

It is used to specify the hex code for the color that will be used to render the period block, e.g. #CCCCCC.

periodAlpha

It is used to specify the transparency for the period block. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 60.

Configuring Open, Close, High, and Low Points

By default, the spark line chart highlights the open, close, high, and low points and also shows their value. You can configure the chart to:

  • Change the color of the open, close, high, and low points

  • Show/hide anchors

  • Show/hide anchor values

Changing the Color of the Open, Close, High, and Low Points

A spark line chart configured for the colors of the open, close, high, and low points looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30", "openColor": "#0099ff", "closeColor": "#0099ff", "highColor": "#00cc33", "lowColor": "#cc0000", "showopenvalue": "1", "showclosevalue": "1", "showHighLowValue": "0" }, "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": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30",
        "openColor": "#0099ff",
        "closeColor": "#0099ff",
        "highColor": "#00cc33",
        "lowColor": "#cc0000",
        "showopenvalue": "1",
        "showclosevalue": "1",
        "showHighLowValue": "0"
    },
    "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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30",
            //Changing open,close,high and low point colors
            "openColor": "#0099ff",
            "closeColor": "#0099ff",
            "highColor": "#00cc33",
            "lowColor": "#cc0000",
            "showopenvalue": "1",
            "showclosevalue": "1",
            "showHighLowValue": "0"
        },
        "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 attributes used to define colors for the points:

Attribute Name Description

openColor

It is used to specify the hex code of the color that will be used to render the opening value anchor, e.g. #444444.

closeColor

It is used to specify the hex code of the color that will be used to render the closing value anchor, e.g. #AC34EF.

highColor

It is used to specify the hex code of the color that will be used to render the high value anchor, e.g. #435DEF.

lowColor

It is used to specify the hex code of the color that will be used to render the low value anchor, e.g. #DDDDDD.

Showing Selective Points

A spark line chart with the open, close, high, and low anchor points hidden looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30", "showOpenAnchor": "0", "showCloseAnchor": "0", "showHighAnchor": "0", "showLowAnchor": "0" }, "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": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30",
        "showOpenAnchor": "0",
        "showCloseAnchor": "0",
        "showHighAnchor": "0",
        "showLowAnchor": "0"
    },
    "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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30",
            "showOpenAnchor": "0",
            "showCloseAnchor": "0",
            "showHighAnchor": "0",
            "showLowAnchor": "0"
        },
        "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"
            }]
        }]
    },
    events: {
        'beforeRender': function(event, args) {
            // creating div for controllers
            var controllers = document.createElement('div'),
                chartRef = event.sender,
                openCB,
                closeCB,
                highCB,
                lowCB,
                //Function to show/hide anchors
                showAnchor = function(evt) {
                    //Storing the attributes names to get the names dynamically
                    var attrbObj = {
                            open: 'showOpenAnchor',
                            close: 'showCloseAnchor',
                            high: 'showHighAnchor',
                            low: 'showLowAnchor'
                        },
                        attrbName = attrbObj[evt.target.id];
                    (evt.target.checked) ? chartRef.setChartAttribute(attrbName, 1) : chartRef.setChartAttribute(attrbName, 0);
                };

            controllers.setAttribute('id', 'checkbox-container');

            // Create checkbox inside div
            controllers.innerHTML = '<input type="checkbox" id="open" style="margin: 5px;" >Show Open Anchor ?</input><input type="checkbox" id="close" style="margin: 5px;">Show Close Anchor ?</input><input type="checkbox" id="high" style="margin: 5px;">Show High Anchor ?</input><input type="checkbox" id="low" style="margin: 5px;">Show Low Anchor ?</input>';

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            // setting css styles for controllers div
            controllers.style.cssText = "margin-top: 10px;text-align:center;font-family: 'Helvetica Neue', Arial;font-size: 11px;font-weight: normal;";
            openCB = document.getElementById('open');
            closeCB = document.getElementById('close');
            highCB = document.getElementById('high');
            lowCB = document.getElementById('low');
            //Set event listener for check boxes
            openCB.addEventListener && openCB.addEventListener("click", showAnchor);
            closeCB.addEventListener && closeCB.addEventListener("click", showAnchor);
            highCB.addEventListener && highCB.addEventListener("click", showAnchor);
            lowCB.addEventListener && lowCB.addEventListener("click", showAnchor);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The chart is rendered with four check boxes below the chart: Show Open Anchor?, Show Close Anchor?, Show High Anchor?, and Show Low Anchor?. Selecting the check boxes shows the respective anchor points, clearing them hides the respective anchor points.

Given below is a brief description of the attributes used to show/hide anchors:

Attribute Name Description

showOpenAnchor

It is used to specify whether the opening anchor point will be shown. Setting this attribute to 0 will hide the anchor, setting it to 1 (default) will show it.

showCloseAnchor

It is used to specify whether the closing anchor point will be shown. Setting this attribute to 0 will hide the anchor, setting it to 1 (default) will show it.

showHighAnchor

It is used to specify whether the high anchor point will be shown. Setting this attribute to 0 will hide the anchor, setting it to 1 (default) will show it.

showLowAnchor

It is used to specify whether the low anchor point will be shown. Setting this attribute to 0 will hide the anchor, setting it to 1 (default) will show it.

Showing/Hiding Anchor Point Values

A spark line chart configured to hide the anchor point values looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30", "showOpenValue": "0", "showCloseValue": "0", "showHighLowValue": "0" }, "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": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30",
        "showOpenValue": "0",
        "showCloseValue": "0",
        "showHighLowValue": "0"
    },
    "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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30",
            "showOpenValue": "0",
            "showCloseValue": "0",
            "showHighLowValue": "0"
        },
        "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"
            }]
        }]
    },
    events: {
        'beforeRender': function(event, args) {
            // creating div for controllers
            var controllers = document.createElement('div'),
                chartRef = event.sender,
                openCB2,
                closeCB2,
                highLowCB,
                //Function to show/hide values
                showValues = function(evt) {
                    //Storing the attributes names to get the names dynamically
                    var attrbObj = {
                            open2: 'showOpenValue',
                            close2: 'showCloseValue',
                            highLow: 'showHighLowValue'
                        },
                        attrbName = attrbObj[evt.target.id];
                    (evt.target.checked) ? chartRef.setChartAttribute(attrbName, 1) : chartRef.setChartAttribute(attrbName, 0);
                };

            controllers.setAttribute('id', 'checkbox-container');

            // Create checkbox inside div
            controllers.innerHTML = '<input type="checkbox" id="open2" style="margin: 5px;">Show Open Value ?</input><input type="checkbox" id="close2" style="margin: 5px;">Show Close Value ?</input><input type="checkbox" id="highLow" style="margin: 5px;">Show High/Low Values ?</input>';

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            // setting css styles for controllers div
            controllers.style.cssText = "margin-top: 10px;width: 400px;font-family: 'Helvetica Neue', Arial;font-size: 11px;font-weight: normal;";
            openCB2 = document.getElementById('open2');
            closeCB2 = document.getElementById('close2');
            highLowCB = document.getElementById('highLow');

            //Set event listener for check boxes
            openCB2.addEventListener && openCB2.addEventListener("click", showValues);
            closeCB2.addEventListener && closeCB2.addEventListener("click", showValues);
            highLowCB.addEventListener && highLowCB.addEventListener("click", showValues);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The chart is rendered with four check boxes below the chart: Show Open Value?, Show Close Value?, Show High Value?, and Show Low Value?. Selecting the check boxes shows the respective anchor values, clearing them hides the respective anchor values.

Given below is a brief description of the attributes used to show/hide anchor point values:

Attribute Name Description

showOpenValue

It is used to specify whether the opening value will be shown. Setting this attribute to 0 will hide the value, setting it to 1 (default) will show the value.

showCloseValue

It is used to specify whether the closing value will be shown. Setting this attribute to 0 will hide the value, setting it to 1 (default) will show the value.

showHighLowValue

It is used to specify whether the high and low values will be shown. Setting this attribute to 0 will hide the values, setting it to 1 (default) will show the values.

Configuring Line and Anchor Cosmetics

Configuring Line Cosmetics

A spark line chart configured for line cosmetics looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30", "lineColor": "#ee8f49", "lineThickness": "2", "lineAlpha": "75" }, "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": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30",
        "lineColor": "#ee8f49",
        "lineThickness": "2",
        "lineAlpha": "75"
    },
    "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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30",
            //Customizing line color
            "lineColor": "#ee8f49",
            //Changing lie thickness
            "lineThickness": "2",
            //Setting Line transparency(alpha)
            "lineAlpha": "75",
        },
        "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 attributes used to configure line cosmetics:

Attribute Name Description

lineColor

It is used to specify the hex code of the color that will be used to render the lines on the chart, e.g. #EDA345.

lineThickness

It is used to specify the thickness of the lines on the chart, e.g. 5.

lineAlpha

It is used to specify the transparency of the lines on the chart. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 45.

Configuring Anchor Cosmetics

A spark line chart configured for the anchor cosmetics looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30", "drawAnchors": "1", "anchorSides": "3", "anchorRadius": "3", "anchorColor": "#ee8f49", "anchorAlpha": "40" }, "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": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30",
        "drawAnchors": "1",
        "anchorSides": "3",
        "anchorRadius": "3",
        "anchorColor": "#ee8f49",
        "anchorAlpha": "40"
    },
    "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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30",
            "drawAnchors": "1",
            "anchorSides": "3",
            "anchorRadius": "3",
            "anchorColor": "#ee8f49",
            "anchorAlpha": "40"
        },
        "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 attributes used to configure anchor cosmetics:

Attribute Name Description

drawAnchors

It is used to specify whether anchors should be drawn for the chart. Setting this attribute to 1 will draw the anchors, setting it to 0 (default) will hide them. If the anchors are not shown, then the tooltip and links won’t work.

anchorSides

It is used to specify the number of sides an anchor will have. This will determine the shape of the anchor. For example, an anchor with three sides will represent a triangle, an anchor with four sides will represent a square.

anchorRadius

It is used to set the radius, in pixels, of the anchor, e.g. 40.

anchorColor

It is used to specify the hex code of the color that will be applied to the anchors, e.g. #333333.

anchorAlpha

It is used to specify the transparency of the anchors. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40.

Showing Only Points but No Lines

You can also show only points, representing the data values, on the chart, without any line segments connecting them.

A spark line chart configured to show only points, without any line segments, looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30", "drawAnchors": "1", "lineAlpha": "0", "anchorSides": "4", "anchorRadius": "3", "anchorColor": "#ee8f49", "anchorAlpha": "60" }, "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": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30",
        "drawAnchors": "1",
        "lineAlpha": "0",
        "anchorSides": "4",
        "anchorRadius": "3",
        "anchorColor": "#ee8f49",
        "anchorAlpha": "60"
    },
    "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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30",
            "drawAnchors": "1",
            "lineAlpha": "0",
            "anchorSides": "4",
            "anchorRadius": "3",
            "anchorColor": "#ee8f49",
            "anchorAlpha": "60"
        },
        "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 hide line segments:

Attribute Name Description

lineAlpha

It is used to specify the transparency of the lines on the chart. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 45. To hide line segments, set "lineAlpha": "0"

Adding Trend-lines/Trend-zones

Adding Trend-lines

A spark line chart rendered with a trend-line looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30" }, "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" } ] } ], "trendlines": [ { "line": [ { "startvalue": "40", "endValue": "42" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30"
    },
    "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"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "40",
                    "endValue": "42"
                }
            ]
        }
    ]
}
<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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30"
        },
        "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"
            }]
        }],
        //Adding trendlines in chart
        "trendlines": [{
            "line": [{
                "startvalue": "40",
                "endValue": "42"
            }]
        }]
    }
}
);
    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 attributes used to render a trend-line:

Attribute Name Description

startValue

It is used to specify the starting value for the trend-line. For example, if you want to plot a slanted trend-line from value 102 to 109, the starting value will be 102.

endValue

It is used to specify the ending value for the trend-line. For example, if you want to plot a slanted trend-line from value 102 to 109, the ending value will be 109.

Customizing Trend-lines

A spark line chart with the cosmetic properties of trend-lines configured looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30" }, "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" } ] } ], "trendlines": [ { "line": [ { "startvalue": "40", "color": "#ff0000", "thickness": "1", "dashed": "1", "dashedlen": "3", "dashgap": "3", "alpha": "100" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30"
    },
    "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"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startvalue": "40",
                    "color": "#ff0000",
                    "thickness": "1",
                    "dashed": "1",
                    "dashedlen": "3",
                    "dashgap": "3",
                    "alpha": "100"
                }
            ]
        }
    ]
}
<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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30"
        },
        "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"
            }]
        }],
        //Adding trendlines in chart
        "trendlines": [{
            "line": [{
                "startvalue": "40",
                "color": "#ff0000",
                "thickness": "1",
                "dashed": "1",
                "dashedlen": "3",
                "dashgap": "3",
                "alpha": "100"
            }]
        }]
    }
}
);
    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 attributes used to configure trend-line cosmetics:

Attribute Name Description

color

It is used to specify the hex code of the color that will be used to render the trend-line and its associated text, e.g. #AB3456.

thickness

It is used to specify the thickness of the trend-line, e.g. 5.

dashed

It is used to specify whether the trend-line will be rendered as a dashed line. Setting this attribute to 1 will render the trend-line as a dashed line, setting it 0 (default) will render it as a whole line.

dashLen

It is used to specify the length of each dash, if the trend-line is rendered as a dashed line, e.g. 5.

dashGap

It is used to specify the gap between each dash, if the trend-line is rendered as a dashed line, e, g. 2.

alpha

It is used to specify the transparency of the trend-line. this attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50.

Adding Trend-zones

A spark line chart rendered with a trend-zone looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30" }, "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" } ] } ], "trendlines": [ { "line": [ { "startValue": "30", "endValue": "45", "isTrendZone": "1", "color": "#999999" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30"
    },
    "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"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startValue": "30",
                    "endValue": "45",
                    "isTrendZone": "1",
                    "color": "#999999"
                }
            ]
        }
    ]
}
<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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30"
        },
        "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"
            }]
        }],
        //Adding trend-zone in chart
        "trendlines": [{
            "line": [{
                "startValue": "30",
                "endValue": "45",
                "isTrendZone": "1",
                "color": "#999999"
            }]
        }]
    }
}
);
    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 attributes used to render a trend-zone:

Attribute Name Description

isTrendZone

It is used to specify whether the chart will be rendered with a trend-zone. Setting this attribute to 1 will render a trend-zone, setting it to 0 (default) will render a trend-line.

startValue

It is used to specify the starting value for the trend-zone. For example, if you want to plot a trend-zone from value 102 to 109, the starting value will be 102.

endValue

It is used to specify the ending value for the trend-zone. For example, if you want to plot a trend-zone from value 102 to 109, the ending value will be 109.

color

It is used to specify the hex code of the color that will be used to render the trend-zone and its associated text, e.g. #543ACD.

Configuring Hover Effects

You can use hover effects to improve the visual representation of your chart.

A spark line chart configured to enable hover effects looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Stock Price", "subcaption": "Last month", "numberPrefix": "$", "chartBottomMargin": "30", "anchorRadius": "4", "openHoverColor": "#9bd6fd", "closeHoverColor": "#9bd6fd", "highHoverColor": "#90ff90", "lowHoverColor": "#fd6c6c" }, "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": {
        "theme": "fint",
        "caption": "Stock Price",
        "subcaption": "Last month",
        "numberPrefix": "$",
        "chartBottomMargin": "30",
        "anchorRadius": "4",
        "openHoverColor": "#9bd6fd",
        "closeHoverColor": "#9bd6fd",
        "highHoverColor": "#90ff90",
        "lowHoverColor": "#fd6c6c"
    },
    "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: '70',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Stock Price",
            "subcaption": "Last month",
            "numberPrefix": "$",
            "chartBottomMargin": "30",
            "anchorRadius": "4",
            //Configuring Hover color for anchors
            "openHoverColor": "#9bd6fd",
            "closeHoverColor": "#9bd6fd",
            "highHoverColor": "#90ff90",
            "lowHoverColor": "#fd6c6c"
        },
        "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 attributes used to configure hover effects:

Attribute Name Description

openHoverColor

It is used to specify the hex code of the color that will be used to render the opening value anchor when the mouse pointer is hovered over it, e.g. #43DE56.

closeHoverColor

It is used to specify the hex code of the color that will be used to render the closing value anchor when the mouse pointer is hovered over it, e.g. #AD3452.

highHoverColor

It is used to specify the hex code of the color that will be used to render the high value anchor when the mouse pointer is hovered over it, e.g. #ACDE34.

lowHoverColor

It is used to specify the hex code of the color that will be used to render the low value anchor when the mouse pointer is hovered over it, e.g. #BE35DF.

Top