Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT allows you to customize several functional and cosmetic properties for scroll charts.

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

Configuring the Number of Visible Data Plots

A scroll chart with the number of visible data plots set to twelve looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Sales Trends", "subcaption": "FY 2012 - FY 2013", "xaxisname": "Month", "yaxisname": "Revenue", "placeValuesInside": "1", "rotateValues": "1", "valueFontColor": "#ffffff", "numberprefix": "$", "numVisiblePlot": "12", "theme": "fint" }, "categories": [ { "category": [ { "label": "Jan 2012" }, { "label": "Feb 2012" }, { "label": "Mar 2012" }, { "label": "Apr 2012" }, { "label": "May 2012" }, { "label": "Jun 2012" }, { "label": "Jul 2012" }, { "label": "Aug 2012" }, { "label": "Sep 2012" }, { "label": "Oct 2012" }, { "label": "Nov 2012" }, { "label": "Dec 2012" }, { "label": "Jan 2013" }, { "label": "Feb 2013" }, { "label": "Mar 2013" }, { "label": "Apr 2013" }, { "label": "May 2013" }, { "label": "Jun 2013" }, { "label": "Jul 2013" }, { "label": "Aug 2013" }, { "label": "Sep 2013" }, { "label": "Oct 2013" }, { "label": "Nov 2013" }, { "label": "Dec 2013" } ] } ], "dataset": [ { "data": [ { "value": "27400" }, { "value": "29800" }, { "value": "25800" }, { "value": "26800" }, { "value": "29600" }, { "value": "32600" }, { "value": "31800" }, { "value": "36700" }, { "value": "29700" }, { "value": "31900" }, { "value": "34800" }, { "value": "24800" }, { "value": "26300" }, { "value": "31800" }, { "value": "30900" }, { "value": "33000" }, { "value": "36200" }, { "value": "32100" }, { "value": "37500" }, { "value": "38500" }, { "value": "35400" }, { "value": "38200" }, { "value": "33300" }, { "value": "38300" } ] } ] }
{
    "chart": {
        "caption": "Sales Trends",
        "subcaption": "FY 2012 - FY 2013",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "placeValuesInside": "1",
        "rotateValues": "1",
        "valueFontColor": "#ffffff",
        "numberprefix": "$",
        "numVisiblePlot": "12",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2012"
                },
                {
                    "label": "Feb 2012"
                },
                {
                    "label": "Mar 2012"
                },
                {
                    "label": "Apr 2012"
                },
                {
                    "label": "May 2012"
                },
                {
                    "label": "Jun 2012"
                },
                {
                    "label": "Jul 2012"
                },
                {
                    "label": "Aug 2012"
                },
                {
                    "label": "Sep 2012"
                },
                {
                    "label": "Oct 2012"
                },
                {
                    "label": "Nov 2012"
                },
                {
                    "label": "Dec 2012"
                },
                {
                    "label": "Jan 2013"
                },
                {
                    "label": "Feb 2013"
                },
                {
                    "label": "Mar 2013"
                },
                {
                    "label": "Apr 2013"
                },
                {
                    "label": "May 2013"
                },
                {
                    "label": "Jun 2013"
                },
                {
                    "label": "Jul 2013"
                },
                {
                    "label": "Aug 2013"
                },
                {
                    "label": "Sep 2013"
                },
                {
                    "label": "Oct 2013"
                },
                {
                    "label": "Nov 2013"
                },
                {
                    "label": "Dec 2013"
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "27400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "25800"
                },
                {
                    "value": "26800"
                },
                {
                    "value": "29600"
                },
                {
                    "value": "32600"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "36700"
                },
                {
                    "value": "29700"
                },
                {
                    "value": "31900"
                },
                {
                    "value": "34800"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "26300"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "30900"
                },
                {
                    "value": "33000"
                },
                {
                    "value": "36200"
                },
                {
                    "value": "32100"
                },
                {
                    "value": "37500"
                },
                {
                    "value": "38500"
                },
                {
                    "value": "35400"
                },
                {
                    "value": "38200"
                },
                {
                    "value": "33300"
                },
                {
                    "value": "38300"
                }
            ]
        }
    ]
}
<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: 'scrollColumn2d',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Sales Trends",
            "subcaption": "FY 2012 - FY 2013",
            "xaxisname": "Month",
            "yaxisname": "Revenue",
            "placeValuesInside": "1",
            "rotateValues": "1",
            "valueFontColor": "#ffffff",
            "numberprefix": "$",
            //Configure no.of visible plots
            "numVisiblePlot": "12",

            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "label": "Jan 2012"
            }, {
                "label": "Feb 2012"
            }, {
                "label": "Mar 2012"
            }, {
                "label": "Apr 2012"
            }, {
                "label": "May 2012"
            }, {
                "label": "Jun 2012"
            }, {
                "label": "Jul 2012"
            }, {
                "label": "Aug 2012"
            }, {
                "label": "Sep 2012"
            }, {
                "label": "Oct 2012"
            }, {
                "label": "Nov 2012"
            }, {
                "label": "Dec 2012"
            }, {
                "label": "Jan 2013"
            }, {
                "label": "Feb 2013"
            }, {
                "label": "Mar 2013"
            }, {
                "label": "Apr 2013"
            }, {
                "label": "May 2013"
            }, {
                "label": "Jun 2013"
            }, {
                "label": "Jul 2013"
            }, {
                "label": "Aug 2013"
            }, {
                "label": "Sep 2013"
            }, {
                "label": "Oct 2013"
            }, {
                "label": "Nov 2013"
            }, {
                "label": "Dec 2013"
            }]
        }],
        "dataset": [{
            "data": [{
                "value": "27400"
            }, {
                "value": "29800"
            }, {
                "value": "25800"
            }, {
                "value": "26800"
            }, {
                "value": "29600"
            }, {
                "value": "32600"
            }, {
                "value": "31800"
            }, {
                "value": "36700"
            }, {
                "value": "29700"
            }, {
                "value": "31900"
            }, {
                "value": "34800"
            }, {
                "value": "24800"
            }, {
                "value": "26300"
            }, {
                "value": "31800"
            }, {
                "value": "30900"
            }, {
                "value": "33000"
            }, {
                "value": "36200"
            }, {
                "value": "32100"
            }, {
                "value": "37500"
            }, {
                "value": "38500"
            }, {
                "value": "35400"
            }, {
                "value": "38200"
            }, {
                "value": "33300"
            }, {
                "value": "38300"
            }]
        }]
    }
}
);
    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 set the number of visible plots:

Attribute Name Description

numVisiblePlot

It is used to specify the number of data plots that will be visible in the scroll pane when the chart is first loaded.

Rendering a Scroll Bar with the Gradient Effect

By default, a scroll chart has a flat scroll bar. You can opt to render a gradient scroll to visually enhance your chart.

A scroll chart with a gradient scroll bar looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Sales Trends", "subcaption": "FY 2012 - FY 2013", "xaxisname": "Month", "yaxisname": "Revenue", "placeValuesInside": "1", "rotateValues": "1", "valueFontColor": "#ffffff", "numberprefix": "$", "flatScrollBars": "0", "theme": "fint" }, "categories": [ { "category": [ { "label": "Jan 2012" }, { "label": "Feb 2012" }, { "label": "Mar 2012" }, { "label": "Apr 2012" }, { "label": "May 2012" }, { "label": "Jun 2012" }, { "label": "Jul 2012" }, { "label": "Aug 2012" }, { "label": "Sep 2012" }, { "label": "Oct 2012" }, { "label": "Nov 2012" }, { "label": "Dec 2012" }, { "label": "Jan 2013" }, { "label": "Feb 2013" }, { "label": "Mar 2013" }, { "label": "Apr 2013" }, { "label": "May 2013" }, { "label": "Jun 2013" }, { "label": "Jul 2013" }, { "label": "Aug 2013" }, { "label": "Sep 2013" }, { "label": "Oct 2013" }, { "label": "Nov 2013" }, { "label": "Dec 2013" } ] } ], "dataset": [ { "data": [ { "value": "27400" }, { "value": "29800" }, { "value": "25800" }, { "value": "26800" }, { "value": "29600" }, { "value": "32600" }, { "value": "31800" }, { "value": "36700" }, { "value": "29700" }, { "value": "31900" }, { "value": "34800" }, { "value": "24800" }, { "value": "26300" }, { "value": "31800" }, { "value": "30900" }, { "value": "33000" }, { "value": "36200" }, { "value": "32100" }, { "value": "37500" }, { "value": "38500" }, { "value": "35400" }, { "value": "38200" }, { "value": "33300" }, { "value": "38300" } ] } ] }
{
    "chart": {
        "caption": "Sales Trends",
        "subcaption": "FY 2012 - FY 2013",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "placeValuesInside": "1",
        "rotateValues": "1",
        "valueFontColor": "#ffffff",
        "numberprefix": "$",
        "flatScrollBars": "0",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2012"
                },
                {
                    "label": "Feb 2012"
                },
                {
                    "label": "Mar 2012"
                },
                {
                    "label": "Apr 2012"
                },
                {
                    "label": "May 2012"
                },
                {
                    "label": "Jun 2012"
                },
                {
                    "label": "Jul 2012"
                },
                {
                    "label": "Aug 2012"
                },
                {
                    "label": "Sep 2012"
                },
                {
                    "label": "Oct 2012"
                },
                {
                    "label": "Nov 2012"
                },
                {
                    "label": "Dec 2012"
                },
                {
                    "label": "Jan 2013"
                },
                {
                    "label": "Feb 2013"
                },
                {
                    "label": "Mar 2013"
                },
                {
                    "label": "Apr 2013"
                },
                {
                    "label": "May 2013"
                },
                {
                    "label": "Jun 2013"
                },
                {
                    "label": "Jul 2013"
                },
                {
                    "label": "Aug 2013"
                },
                {
                    "label": "Sep 2013"
                },
                {
                    "label": "Oct 2013"
                },
                {
                    "label": "Nov 2013"
                },
                {
                    "label": "Dec 2013"
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "27400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "25800"
                },
                {
                    "value": "26800"
                },
                {
                    "value": "29600"
                },
                {
                    "value": "32600"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "36700"
                },
                {
                    "value": "29700"
                },
                {
                    "value": "31900"
                },
                {
                    "value": "34800"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "26300"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "30900"
                },
                {
                    "value": "33000"
                },
                {
                    "value": "36200"
                },
                {
                    "value": "32100"
                },
                {
                    "value": "37500"
                },
                {
                    "value": "38500"
                },
                {
                    "value": "35400"
                },
                {
                    "value": "38200"
                },
                {
                    "value": "33300"
                },
                {
                    "value": "38300"
                }
            ]
        }
    ]
}
<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: 'scrollColumn2d',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Sales Trends",
            "subcaption": "FY 2012 - FY 2013",
            "xaxisname": "Month",
            "yaxisname": "Revenue",
            "placeValuesInside": "1",
            "rotateValues": "1",
            "valueFontColor": "#ffffff",
            "numberprefix": "$",
            //Configure of gradient scrollbar
            "flatScrollBars": "0",

            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "label": "Jan 2012"
            }, {
                "label": "Feb 2012"
            }, {
                "label": "Mar 2012"
            }, {
                "label": "Apr 2012"
            }, {
                "label": "May 2012"
            }, {
                "label": "Jun 2012"
            }, {
                "label": "Jul 2012"
            }, {
                "label": "Aug 2012"
            }, {
                "label": "Sep 2012"
            }, {
                "label": "Oct 2012"
            }, {
                "label": "Nov 2012"
            }, {
                "label": "Dec 2012"
            }, {
                "label": "Jan 2013"
            }, {
                "label": "Feb 2013"
            }, {
                "label": "Mar 2013"
            }, {
                "label": "Apr 2013"
            }, {
                "label": "May 2013"
            }, {
                "label": "Jun 2013"
            }, {
                "label": "Jul 2013"
            }, {
                "label": "Aug 2013"
            }, {
                "label": "Sep 2013"
            }, {
                "label": "Oct 2013"
            }, {
                "label": "Nov 2013"
            }, {
                "label": "Dec 2013"
            }]
        }],
        "dataset": [{
            "data": [{
                "value": "27400"
            }, {
                "value": "29800"
            }, {
                "value": "25800"
            }, {
                "value": "26800"
            }, {
                "value": "29600"
            }, {
                "value": "32600"
            }, {
                "value": "31800"
            }, {
                "value": "36700"
            }, {
                "value": "29700"
            }, {
                "value": "31900"
            }, {
                "value": "34800"
            }, {
                "value": "24800"
            }, {
                "value": "26300"
            }, {
                "value": "31800"
            }, {
                "value": "30900"
            }, {
                "value": "33000"
            }, {
                "value": "36200"
            }, {
                "value": "32100"
            }, {
                "value": "37500"
            }, {
                "value": "38500"
            }, {
                "value": "35400"
            }, {
                "value": "38200"
            }, {
                "value": "33300"
            }, {
                "value": "38300"
            }]
        }]
    }
}
);
    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 select a flat / gradient scroll bar:

Attribute Name Description

flatScrollBars

It is used to specify whether a gradient scroll bar or a flat scroll bar will be rendered on the chart. Setting this attribute to 0 will render a gradient scroll bar, setting it to 1 (default) will render a flat scroll bar.

Customizing the Scroll Bar

A scroll chart with the cosmetic properties of the scroll bar customized looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Sales Trends", "subcaption": "FY 2012 - FY 2013", "xaxisname": "Month", "yaxisname": "Revenue", "placeValuesInside": "1", "rotateValues": "1", "valueFontColor": "#ffffff", "numberprefix": "$", "scrollShowButtons": "1", "scrollColor": "#1aaf5d", "scrollHeight": "12", "scrollPadding": "2", "theme": "fint" }, "categories": [ { "category": [ { "label": "Jan 2012" }, { "label": "Feb 2012" }, { "label": "Mar 2012" }, { "label": "Apr 2012" }, { "label": "May 2012" }, { "label": "Jun 2012" }, { "label": "Jul 2012" }, { "label": "Aug 2012" }, { "label": "Sep 2012" }, { "label": "Oct 2012" }, { "label": "Nov 2012" }, { "label": "Dec 2012" }, { "label": "Jan 2013" }, { "label": "Feb 2013" }, { "label": "Mar 2013" }, { "label": "Apr 2013" }, { "label": "May 2013" }, { "label": "Jun 2013" }, { "label": "Jul 2013" }, { "label": "Aug 2013" }, { "label": "Sep 2013" }, { "label": "Oct 2013" }, { "label": "Nov 2013" }, { "label": "Dec 2013" } ] } ], "dataset": [ { "data": [ { "value": "27400" }, { "value": "29800" }, { "value": "25800" }, { "value": "26800" }, { "value": "29600" }, { "value": "32600" }, { "value": "31800" }, { "value": "36700" }, { "value": "29700" }, { "value": "31900" }, { "value": "34800" }, { "value": "24800" }, { "value": "26300" }, { "value": "31800" }, { "value": "30900" }, { "value": "33000" }, { "value": "36200" }, { "value": "32100" }, { "value": "37500" }, { "value": "38500" }, { "value": "35400" }, { "value": "38200" }, { "value": "33300" }, { "value": "38300" } ] } ] }
{
    "chart": {
        "caption": "Sales Trends",
        "subcaption": "FY 2012 - FY 2013",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "placeValuesInside": "1",
        "rotateValues": "1",
        "valueFontColor": "#ffffff",
        "numberprefix": "$",
        "scrollShowButtons": "1",
        "scrollColor": "#1aaf5d",
        "scrollHeight": "12",
        "scrollPadding": "2",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan 2012"
                },
                {
                    "label": "Feb 2012"
                },
                {
                    "label": "Mar 2012"
                },
                {
                    "label": "Apr 2012"
                },
                {
                    "label": "May 2012"
                },
                {
                    "label": "Jun 2012"
                },
                {
                    "label": "Jul 2012"
                },
                {
                    "label": "Aug 2012"
                },
                {
                    "label": "Sep 2012"
                },
                {
                    "label": "Oct 2012"
                },
                {
                    "label": "Nov 2012"
                },
                {
                    "label": "Dec 2012"
                },
                {
                    "label": "Jan 2013"
                },
                {
                    "label": "Feb 2013"
                },
                {
                    "label": "Mar 2013"
                },
                {
                    "label": "Apr 2013"
                },
                {
                    "label": "May 2013"
                },
                {
                    "label": "Jun 2013"
                },
                {
                    "label": "Jul 2013"
                },
                {
                    "label": "Aug 2013"
                },
                {
                    "label": "Sep 2013"
                },
                {
                    "label": "Oct 2013"
                },
                {
                    "label": "Nov 2013"
                },
                {
                    "label": "Dec 2013"
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "27400"
                },
                {
                    "value": "29800"
                },
                {
                    "value": "25800"
                },
                {
                    "value": "26800"
                },
                {
                    "value": "29600"
                },
                {
                    "value": "32600"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "36700"
                },
                {
                    "value": "29700"
                },
                {
                    "value": "31900"
                },
                {
                    "value": "34800"
                },
                {
                    "value": "24800"
                },
                {
                    "value": "26300"
                },
                {
                    "value": "31800"
                },
                {
                    "value": "30900"
                },
                {
                    "value": "33000"
                },
                {
                    "value": "36200"
                },
                {
                    "value": "32100"
                },
                {
                    "value": "37500"
                },
                {
                    "value": "38500"
                },
                {
                    "value": "35400"
                },
                {
                    "value": "38200"
                },
                {
                    "value": "33300"
                },
                {
                    "value": "38300"
                }
            ]
        }
    ]
}
<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: 'scrollColumn2d',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Sales Trends",
            "subcaption": "FY 2012 - FY 2013",
            "xaxisname": "Month",
            "yaxisname": "Revenue",
            "placeValuesInside": "1",
            "rotateValues": "1",
            "valueFontColor": "#ffffff",
            "numberprefix": "$",
            //Configure scrollbar
            "scrollShowButtons": "1",
            "scrollColor": "#1aaf5d",
            "scrollHeight": "12",
            "scrollPadding": "2",
            "theme": "fint"
        },
        "categories": [{
            "category": [{
                "label": "Jan 2012"
            }, {
                "label": "Feb 2012"
            }, {
                "label": "Mar 2012"
            }, {
                "label": "Apr 2012"
            }, {
                "label": "May 2012"
            }, {
                "label": "Jun 2012"
            }, {
                "label": "Jul 2012"
            }, {
                "label": "Aug 2012"
            }, {
                "label": "Sep 2012"
            }, {
                "label": "Oct 2012"
            }, {
                "label": "Nov 2012"
            }, {
                "label": "Dec 2012"
            }, {
                "label": "Jan 2013"
            }, {
                "label": "Feb 2013"
            }, {
                "label": "Mar 2013"
            }, {
                "label": "Apr 2013"
            }, {
                "label": "May 2013"
            }, {
                "label": "Jun 2013"
            }, {
                "label": "Jul 2013"
            }, {
                "label": "Aug 2013"
            }, {
                "label": "Sep 2013"
            }, {
                "label": "Oct 2013"
            }, {
                "label": "Nov 2013"
            }, {
                "label": "Dec 2013"
            }]
        }],
        "dataset": [{
            "data": [{
                "value": "27400"
            }, {
                "value": "29800"
            }, {
                "value": "25800"
            }, {
                "value": "26800"
            }, {
                "value": "29600"
            }, {
                "value": "32600"
            }, {
                "value": "31800"
            }, {
                "value": "36700"
            }, {
                "value": "29700"
            }, {
                "value": "31900"
            }, {
                "value": "34800"
            }, {
                "value": "24800"
            }, {
                "value": "26300"
            }, {
                "value": "31800"
            }, {
                "value": "30900"
            }, {
                "value": "33000"
            }, {
                "value": "36200"
            }, {
                "value": "32100"
            }, {
                "value": "37500"
            }, {
                "value": "38500"
            }, {
                "value": "35400"
            }, {
                "value": "38200"
            }, {
                "value": "33300"
            }, {
                "value": "38300"
            }]
        }]
    }
}
);
    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 customize the scroll bar :

Attribute Name Description

scrollColor

It is used to specify the hex code of the color that will be used to render the scroll bar.

scrollHeight

It is used to specify the height of the scroll bar.

scrollPadding

It is used to specify the distance, in pixels, of the scroll bar from the canvas.

Top