Loading

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:

  • Configure the number of visible data plots

  • Render a scroll bar with gradient effect

  • Customize the scroll bar

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..

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.

The data structure needed to set the number of visible data plots is given below:

{ "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"
                }
            ]
        }
    ]
}

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..

Given below is a brief description of the attribute used to select a flat / gradient scroll bar:

Attribute Name Description

flatscroll bars

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.

The data structure needed to render a gradient scroll bar is given below:

{ "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"
                }
            ]
        }
    ]
}

Customizing the Scroll Bar

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

FusionCharts will load here..

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.

The data structure needed to customize the scroll bar is given below:

{ "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"
                }
            ]
        }
    ]
}

There! You have now seen how you can customize your scroll charts.

Top