Loading
Configuring Scroll Charts
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 |
|---|---|
|
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 |
|---|---|
|
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 |
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 |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the scroll bar. |
|
It is used to specify the height of the scroll bar. |
|
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.