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