Scroll Chart
These chart types belong to FusionCharts XT.
Scroll charts are used to avoid cluttering of plots, thereby providing a clean look. Scroll charts can show a larger number of data plots in a small space.
The types of scroll charts available in the FusionCharts Suite XT are :
Scroll Column 2D Chart
Scroll Line 2D Chart
Scroll Area 2D Chart
Scroll Stacked Column 2D Chart
Scroll Combination 2D Chart (Single Y)
Scroll Combination 2D Chart (Dual Y)
Scroll Column 2D Chart
Let's create a scroll column 2D chart to plot the sales trends for FY 2012 - FY 2013.
To create a scroll column 2D chart follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the chart type using the
typeattribute. To render a scroll column 2D chart, setscrollcolumn2d.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
For a detailed list of attributes, refer to the chart attributes page of scroll column 2D chart.
The scroll column 2D chart for the above code looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Sales Trends",
"subcaption": "2016 - 2017",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "1",
"numberprefix": "$",
"numVisiblePlot": "12",
"scrollheight": "10",
"flatScrollBars": "1",
"scrollShowButtons": "0",
"scrollColor": "#cccccc",
"showHoverEffect": "1"
},
"categories": [
{
"category": [
{
"label": "Jan 2016"
},
{
"label": "Feb 2016"
},
{
"label": "Mar 2016"
},
{
"label": "Apr 2016"
},
{
"label": "May 2016"
},
{
"label": "Jun 2016"
},
{
"label": "Jul 2016"
},
{
"label": "Aug 2016"
},
{
"label": "Sep 2016"
},
{
"label": "Oct 2016"
},
{
"label": "Nov 2016"
},
{
"label": "Dec 2016"
},
{
"label": "Jan 2017"
},
{
"label": "Feb 2017"
},
{
"label": "Mar 2017"
},
{
"label": "Apr 2017"
},
{
"label": "May 2017"
},
{
"label": "Jun 2017"
},
{
"label": "Jul 2017"
},
{
"label": "Aug 2017"
},
{
"label": "Sep 2017"
},
{
"label": "Oct 2017"
},
{
"label": "Nov 2017"
},
{
"label": "Dec 2017"
}
]
}
],
"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 theme="fusion" caption="Sales Trends" subcaption="2016 - 2017" xaxisname="Month" yaxisname="Revenue" showvalues="1" numberprefix="$" numvisibleplot="12" scrollheight="10" flatscrollbars="1" scrollshowbuttons="0" scrollcolor="#cccccc" showhovereffect="1">
<categories>
<category label="Jan 2016" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset>
<set value="27400" />
<set value="29800" />
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="34800" />
<set value="24800" />
<set value="26300" />
<set value="31800" />
<set value="30900" />
<set value="33000" />
<set value="36200" />
<set value="32100" />
<set value="37500" />
<set value="38500" />
<set value="35400" />
<set value="38200" />
<set value="33300" />
<set value="38300" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'scrollColumn2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Sales Trends",
"subcaption": "2016 - 2017",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "1",
"numberprefix": "$",
"numVisiblePlot": "12",
"scrollheight": "10",
"flatScrollBars": "1",
"scrollShowButtons": "0",
"scrollColor": "#cccccc",
"showHoverEffect": "1"
},
"categories": [{
"category": [{
"label": "Jan 2016"
}, {
"label": "Feb 2016"
}, {
"label": "Mar 2016"
}, {
"label": "Apr 2016"
}, {
"label": "May 2016"
}, {
"label": "Jun 2016"
}, {
"label": "Jul 2016"
}, {
"label": "Aug 2016"
}, {
"label": "Sep 2016"
}, {
"label": "Oct 2016"
}, {
"label": "Nov 2016"
}, {
"label": "Dec 2016"
}, {
"label": "Jan 2017"
}, {
"label": "Feb 2017"
}, {
"label": "Mar 2017"
}, {
"label": "Apr 2017"
}, {
"label": "May 2017"
}, {
"label": "Jun 2017"
}, {
"label": "Jul 2017"
}, {
"label": "Aug 2017"
}, {
"label": "Sep 2017"
}, {
"label": "Oct 2017"
}, {
"label": "Nov 2017"
}, {
"label": "Dec 2017"
}]
}],
"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"
}]
}]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the scroll column 2D chart.
Scroll Line 2D Chart
Now, let's create a scroll line 2D chart. To render a scroll line chart in 2D, change the value of the type attribute from scrollColumn2d to scrollline2d. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of scroll line 2D chart.
A single-series scroll line 2D chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Sales Trends",
"subCaption": "(2016 to 2017)",
"xAxisName": "Month",
"yAxisName": "Revenue",
"numberPrefix": "$",
"lineThickness": "3",
"flatScrollBars": "1",
"scrollheight": "10",
"numVisiblePlot": "12",
"showHoverEffect": "1"
},
"categories": [
{
"category": [
{
"label": "Jan 2016"
},
{
"label": "Feb 2016"
},
{
"label": "Mar 2016"
},
{
"label": "Apr 2016"
},
{
"label": "May 2016"
},
{
"label": "Jun 2016"
},
{
"label": "Jul 2016"
},
{
"label": "Aug 2016"
},
{
"label": "Sep 2016"
},
{
"label": "Oct 2016"
},
{
"label": "Nov 2016"
},
{
"label": "Dec 2016"
},
{
"label": "Jan 2017"
},
{
"label": "Feb 2017"
},
{
"label": "Mar 2017"
},
{
"label": "Apr 2017"
},
{
"label": "May 2017"
},
{
"label": "Jun 2017"
},
{
"label": "Jul 2017"
},
{
"label": "Aug 2017"
},
{
"label": "Sep 2017"
},
{
"label": "Oct 2017"
},
{
"label": "Nov 2017"
},
{
"label": "Dec 2017"
}
]
}
],
"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 theme="fusion" caption="Sales Trends" subcaption="(2016 to 2017)" xaxisname="Month" yaxisname="Revenue" numberprefix="$" linethickness="3" flatscrollbars="1" scrollheight="10" numvisibleplot="12" showhovereffect="1">
<categories>
<category label="Jan 2016" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset>
<set value="27400" />
<set value="29800" />
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="34800" />
<set value="24800" />
<set value="26300" />
<set value="31800" />
<set value="30900" />
<set value="33000" />
<set value="36200" />
<set value="32100" />
<set value="37500" />
<set value="38500" />
<set value="35400" />
<set value="38200" />
<set value="33300" />
<set value="38300" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'scrollline2d',
dataFormat: 'json',
renderAt: 'chart-container',
width: '700',
height: '400',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Sales Trends",
"subCaption": "(2016 to 2017)",
"xAxisName": "Month",
"yAxisName": "Revenue",
"numberPrefix": "$",
"lineThickness": "3",
"flatScrollBars": "1",
"scrollheight": "10",
"numVisiblePlot": "12",
"showHoverEffect": "1"
},
"categories": [{
"category": [{
"label": "Jan 2016"
}, {
"label": "Feb 2016"
}, {
"label": "Mar 2016"
}, {
"label": "Apr 2016"
}, {
"label": "May 2016"
}, {
"label": "Jun 2016"
}, {
"label": "Jul 2016"
}, {
"label": "Aug 2016"
}, {
"label": "Sep 2016"
}, {
"label": "Oct 2016"
}, {
"label": "Nov 2016"
}, {
"label": "Dec 2016"
}, {
"label": "Jan 2017"
}, {
"label": "Feb 2017"
}, {
"label": "Mar 2017"
}, {
"label": "Apr 2017"
}, {
"label": "May 2017"
}, {
"label": "Jun 2017"
}, {
"label": "Jul 2017"
}, {
"label": "Aug 2017"
}, {
"label": "Sep 2017"
}, {
"label": "Oct 2017"
}, {
"label": "Nov 2017"
}, {
"label": "Dec 2017"
}]
}],
"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"
}]
}]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the scroll line 2D chart.
Scroll Area 2D Chart
Let's create the scroll area 2D chart. To render a scroll area chart in 2D, change the value of the type attribute from scrollline2d to scrollarea2d. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of scroll area 2D chart.
A single-series scroll area 2D chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Sales Trends",
"subCaption": "(2016 to 2017)",
"xAxisname": "Month",
"pYAxisName": "Amount",
"labelDisplay": "AUTO",
"sYAxisName": "Employees",
"numberPrefix": "$",
"numVisiblePlot": "8",
"flatScrollBars": "1",
"scrollheight": "10"
},
"categories": [
{
"category": [
{
"label": "Jan 2016"
},
{
"label": "Feb 2016"
},
{
"label": "Mar 2016"
},
{
"label": "Apr 2016"
},
{
"label": "May 2016"
},
{
"label": "Jun 2016"
},
{
"label": "Jul 2016"
},
{
"label": "Aug 2016"
},
{
"label": "Sep 2016"
},
{
"label": "Oct 2016"
},
{
"label": "Nov 2016"
},
{
"label": "Dec 2016"
},
{
"label": "Jan 2017"
},
{
"label": "Feb 2017"
},
{
"label": "Mar 2017"
},
{
"label": "Apr 2017"
},
{
"label": "May 2017"
},
{
"label": "Jun 2017"
},
{
"label": "Jul 2017"
},
{
"label": "Aug 2017"
},
{
"label": "Sep 2017"
},
{
"label": "Oct 2017"
},
{
"label": "Nov 2017"
},
{
"label": "Dec 2017"
}
]
}
],
"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 theme="fusion" caption="Sales Trends" subcaption="(2016 to 2017)" xaxisname="Month" pyaxisname="Amount" labeldisplay="AUTO" syaxisname="Employees" numberprefix="$" numvisibleplot="8" flatscrollbars="1" scrollheight="10">
<categories>
<category label="Jan 2016" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset>
<set value="27400" />
<set value="29800" />
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="34800" />
<set value="24800" />
<set value="26300" />
<set value="31800" />
<set value="30900" />
<set value="33000" />
<set value="36200" />
<set value="32100" />
<set value="37500" />
<set value="38500" />
<set value="35400" />
<set value="38200" />
<set value="33300" />
<set value="38300" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'scrollarea2d',
dataFormat: 'json',
renderAt: 'chart-container',
width: '700',
height: '400',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Sales Trends",
"subCaption": "(2016 to 2017)",
"xAxisname": "Month",
"pYAxisName": "Amount",
"labelDisplay": "AUTO",
"sYAxisName": "Employees",
"numberPrefix": "$",
"numVisiblePlot": "8",
"flatScrollBars": "1",
"scrollheight": "10"
},
"categories": [{
"category": [{
"label": "Jan 2016"
}, {
"label": "Feb 2016"
}, {
"label": "Mar 2016"
}, {
"label": "Apr 2016"
}, {
"label": "May 2016"
}, {
"label": "Jun 2016"
}, {
"label": "Jul 2016"
}, {
"label": "Aug 2016"
}, {
"label": "Sep 2016"
}, {
"label": "Oct 2016"
}, {
"label": "Nov 2016"
}, {
"label": "Dec 2016"
}, {
"label": "Jan 2017"
}, {
"label": "Feb 2017"
}, {
"label": "Mar 2017"
}, {
"label": "Apr 2017"
}, {
"label": "May 2017"
}, {
"label": "Jun 2017"
}, {
"label": "Jul 2017"
}, {
"label": "Aug 2017"
}, {
"label": "Sep 2017"
}, {
"label": "Oct 2017"
}, {
"label": "Nov 2017"
}, {
"label": "Dec 2017"
}]
}],
"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"
}]
}]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the scroll area 2D chart.
Scroll Stacked Column 2D Chart
Stacked charts are the multi-series charts with the plot datasets on top of each other. Now, let's create a scroll stacked column 2D chart. The example will plot the sales comparison w.r.t. the products and services for FY 2017-FY 2018.
To render a scroll stacked column chart in 2D, change the value of the type attribute to scrollstackedcolumn2d.
For a detailed list of attributes, refer to the chart attributes page of scroll stacked column 2D chart.
A scroll stacked column 2D chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Sales Comparison",
"subCaption": "(2016 to 2017)",
"xaxisname": "Month",
"yaxisname": "Revenue",
"numberprefix": "$",
"lineThickness": "3",
"flatScrollBars": "1",
"scrollheight": "10",
"numVisiblePlot": "12",
"showHoverEffect": "1"
},
"categories": [
{
"category": [
{
"label": "Jan 2016"
},
{
"label": "Feb 2016"
},
{
"label": "Mar 2016"
},
{
"label": "Apr 2016"
},
{
"label": "May 2016"
},
{
"label": "Jun 2016"
},
{
"label": "Jul 2016"
},
{
"label": "Aug 2016"
},
{
"label": "Sep 2016"
},
{
"label": "Oct 2016"
},
{
"label": "Nov 2016"
},
{
"label": "Dec 2016"
},
{
"label": "Jan 2017"
},
{
"label": "Feb 2017"
},
{
"label": "Mar 2017"
},
{
"label": "Apr 2017"
},
{
"label": "May 2017"
},
{
"label": "Jun 2017"
},
{
"label": "Jul 2017"
},
{
"label": "Aug 2017"
},
{
"label": "Sep 2017"
},
{
"label": "Oct 2017"
},
{
"label": "Nov 2017"
},
{
"label": "Dec 2017"
}
]
}
],
"dataset": [
{
"seriesname": "Products",
"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": "25400"
},
{
"value": "27800"
},
{
"value": "23800"
},
{
"value": "23800"
},
{
"value": "21600"
},
{
"value": "30600"
},
{
"value": "24800"
},
{
"value": "30700"
},
{
"value": "27400"
},
{
"value": "28200"
},
{
"value": "31500"
},
{
"value": "24300"
}
]
},
{
"seriesname": "Services",
"data": [
{
"value": "10000"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
},
{
"value": "11000"
},
{
"value": "9800"
},
{
"value": "11800"
},
{
"value": "19700"
},
{
"value": "21700"
},
{
"value": "21900"
},
{
"value": "22900"
},
{
"value": "20800"
},
{
"value": "12000"
},
{
"value": "10300"
},
{
"value": "11200"
},
{
"value": "13000"
},
{
"value": "15000"
},
{
"value": "11800"
},
{
"value": "9800"
},
{
"value": "14600"
},
{
"value": "19200"
},
{
"value": "20100"
},
{
"value": "21200"
},
{
"value": "19500"
}
]
}
]
}<chart theme="fusion" caption="Sales Comparison" subcaption="(2016 to 2017)" xaxisname="Month" yaxisname="Revenue" numberprefix="$" linethickness="3" flatscrollbars="1" scrollheight="10" numvisibleplot="12" showhovereffect="1">
<categories>
<category label="Jan 2016" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset seriesname="Products">
<set value="27400" />
<set value="29800" />
<set value="25800" />
<set value="26800" />
<set value="29600" />
<set value="32600" />
<set value="31800" />
<set value="36700" />
<set value="29700" />
<set value="31900" />
<set value="34800" />
<set value="24800" />
<set value="25400" />
<set value="27800" />
<set value="23800" />
<set value="23800" />
<set value="21600" />
<set value="30600" />
<set value="24800" />
<set value="30700" />
<set value="27400" />
<set value="28200" />
<set value="31500" />
<set value="24300" />
</dataset>
<dataset seriesname="Services">
<set value="10000" />
<set value="11500" />
<set value="12500" />
<set value="15000" />
<set value="11000" />
<set value="9800" />
<set value="11800" />
<set value="19700" />
<set value="21700" />
<set value="21900" />
<set value="22900" />
<set value="20800" />
<set value="12000" />
<set value="10300" />
<set value="11200" />
<set value="13000" />
<set value="15000" />
<set value="11800" />
<set value="9800" />
<set value="14600" />
<set value="19200" />
<set value="20100" />
<set value="21200" />
<set value="19500" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'scrollstackedcolumn2d',
dataFormat: 'json',
renderAt: 'chart-container',
width: '700',
height: '400',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Sales Comparison",
"subCaption": "(2016 to 2017)",
"xaxisname": "Month",
"yaxisname": "Revenue",
"numberprefix": "$",
"lineThickness": "3",
"flatScrollBars": "1",
"scrollheight": "10",
"numVisiblePlot": "12",
"showHoverEffect": "1"
},
"categories": [{
"category": [{
"label": "Jan 2016"
}, {
"label": "Feb 2016"
}, {
"label": "Mar 2016"
}, {
"label": "Apr 2016"
}, {
"label": "May 2016"
}, {
"label": "Jun 2016"
}, {
"label": "Jul 2016"
}, {
"label": "Aug 2016"
}, {
"label": "Sep 2016"
}, {
"label": "Oct 2016"
}, {
"label": "Nov 2016"
}, {
"label": "Dec 2016"
}, {
"label": "Jan 2017"
}, {
"label": "Feb 2017"
}, {
"label": "Mar 2017"
}, {
"label": "Apr 2017"
}, {
"label": "May 2017"
}, {
"label": "Jun 2017"
}, {
"label": "Jul 2017"
}, {
"label": "Aug 2017"
}, {
"label": "Sep 2017"
}, {
"label": "Oct 2017"
}, {
"label": "Nov 2017"
}, {
"label": "Dec 2017"
}]
}],
"dataset": [{
"seriesname": "Products",
"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": "25400"
}, {
"value": "27800"
}, {
"value": "23800"
}, {
"value": "23800"
}, {
"value": "21600"
}, {
"value": "30600"
}, {
"value": "24800"
}, {
"value": "30700"
}, {
"value": "27400"
}, {
"value": "28200"
}, {
"value": "31500"
}, {
"value": "24300"
}]
}, {
"seriesname": "Services",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}, {
"value": "12000"
}, {
"value": "10300"
}, {
"value": "11200"
}, {
"value": "13000"
}, {
"value": "15000"
}, {
"value": "11800"
}, {
"value": "9800"
}, {
"value": "14600"
}, {
"value": "19200"
}, {
"value": "20100"
}, {
"value": "21200"
}, {
"value": "19500"
}]
}]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the scroll stacked column 2D chart.
Scroll Combination 2D Chart
Now, we will create a scroll combination 2D chart to plot the revenue and the profit earned, in dollars, and the profit for FY 2017-FY 2018.
To render a scroll combination 2D chart, change the value of the type attribute to scrollcombi2d.
For a detailed list of attributes, refer to the chart attributes page of scroll combination 2D chart.
A scroll combination 2D chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Actual Revenue, Targeted Revenues & Profits",
"subCaption": "2016 - 2017",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"numVisiblePlot": "12",
"scrollheight": "10",
"flatScrollBars": "1",
"scrollShowButtons": "0",
"scrollColor": "#cccccc",
"showHoverEffect": "1"
},
"categories": [
{
"category": [
{
"label": "Jan 2016"
},
{
"label": "Feb 2016"
},
{
"label": "Mar 2016"
},
{
"label": "Apr 2016"
},
{
"label": "May 2016"
},
{
"label": "Jun 2016"
},
{
"label": "Jul 2016"
},
{
"label": "Aug 2016"
},
{
"label": "Sep 2016"
},
{
"label": "Oct 2016"
},
{
"label": "Nov 2016"
},
{
"label": "Dec 2016"
},
{
"label": "Jan 2017"
},
{
"label": "Feb 2017"
},
{
"label": "Mar 2017"
},
{
"label": "Apr 2017"
},
{
"label": "May 2017"
},
{
"label": "Jun 2017"
},
{
"label": "Jul 2017"
},
{
"label": "Aug 2017"
},
{
"label": "Sep 2017"
},
{
"label": "Oct 2017"
},
{
"label": "Nov 2017"
},
{
"label": "Dec 2017"
}
]
}
],
"dataset": [
{
"seriesName": "Actual Revenue",
"data": [
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "25000"
},
{
"value": "19000"
},
{
"value": "23000"
},
{
"value": "22000"
},
{
"value": "25000"
},
{
"value": "21000"
},
{
"value": "23000"
},
{
"value": "27000"
},
{
"value": "26000"
},
{
"value": "24000"
},
{
"value": "28000"
},
{
"value": "26000"
},
{
"value": "27000"
},
{
"value": "29000"
},
{
"value": "26000"
}
]
},
{
"seriesName": "Projected Revenue",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "15000"
},
{
"value": "16000"
},
{
"value": "17000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "20000"
},
{
"value": "21000"
},
{
"value": "22000"
},
{
"value": "23000"
},
{
"value": "24000"
},
{
"value": "22000"
},
{
"value": "23000"
},
{
"value": "25000"
},
{
"value": "22000"
},
{
"value": "20000"
},
{
"value": "24000"
},
{
"value": "25000"
},
{
"value": "27000"
},
{
"value": "24000"
},
{
"value": "23000"
},
{
"value": "25000"
}
]
},
{
"seriesName": "Profit",
"renderAs": "area",
"showValues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
},
{
"value": "6000"
},
{
"value": "5000"
},
{
"value": "7000"
},
{
"value": "8000"
},
{
"value": "8000"
},
{
"value": "9000"
},
{
"value": "7000"
},
{
"value": "10000"
},
{
"value": "9000"
},
{
"value": "7000"
},
{
"value": "8000"
},
{
"value": "11000"
}
]
}
]
}<chart theme="fusion" caption="Actual Revenue, Targeted Revenues & Profits" subcaption="2016 - 2017" xaxisname="Month" yaxisname="Amount (In USD)" numberprefix="$" numvisibleplot="12" scrollheight="10" flatscrollbars="1" scrollshowbuttons="0" scrollcolor="#cccccc" showhovereffect="1">
<categories>
<category label="Jan 2016" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset seriesname="Actual Revenue">
<set value="16000" />
<set value="20000" />
<set value="18000" />
<set value="19000" />
<set value="15000" />
<set value="21000" />
<set value="16000" />
<set value="20000" />
<set value="17000" />
<set value="25000" />
<set value="19000" />
<set value="23000" />
<set value="22000" />
<set value="25000" />
<set value="21000" />
<set value="23000" />
<set value="27000" />
<set value="26000" />
<set value="24000" />
<set value="28000" />
<set value="26000" />
<set value="27000" />
<set value="29000" />
<set value="26000" />
</dataset>
<dataset seriesname="Projected Revenue" renderas="line" showvalues="0">
<set value="15000" />
<set value="16000" />
<set value="17000" />
<set value="18000" />
<set value="19000" />
<set value="19000" />
<set value="19000" />
<set value="19000" />
<set value="20000" />
<set value="21000" />
<set value="22000" />
<set value="23000" />
<set value="24000" />
<set value="22000" />
<set value="23000" />
<set value="25000" />
<set value="22000" />
<set value="20000" />
<set value="24000" />
<set value="25000" />
<set value="27000" />
<set value="24000" />
<set value="23000" />
<set value="25000" />
</dataset>
<dataset seriesname="Profit" renderas="area" showvalues="0">
<set value="4000" />
<set value="5000" />
<set value="3000" />
<set value="4000" />
<set value="1000" />
<set value="7000" />
<set value="1000" />
<set value="4000" />
<set value="1000" />
<set value="8000" />
<set value="2000" />
<set value="7000" />
<set value="6000" />
<set value="5000" />
<set value="7000" />
<set value="8000" />
<set value="8000" />
<set value="9000" />
<set value="7000" />
<set value="10000" />
<set value="9000" />
<set value="7000" />
<set value="8000" />
<set value="11000" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'scrollcombi2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Actual Revenue, Targeted Revenues & Profits",
"subCaption": "2016 - 2017",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"numVisiblePlot": "12",
"scrollheight": "10",
"flatScrollBars": "1",
"scrollShowButtons": "0",
"scrollColor": "#cccccc",
"showHoverEffect": "1",
},
"categories": [{
"category": [{
"label": "Jan 2016"
}, {
"label": "Feb 2016"
}, {
"label": "Mar 2016"
}, {
"label": "Apr 2016"
}, {
"label": "May 2016"
}, {
"label": "Jun 2016"
}, {
"label": "Jul 2016"
}, {
"label": "Aug 2016"
}, {
"label": "Sep 2016"
}, {
"label": "Oct 2016"
}, {
"label": "Nov 2016"
}, {
"label": "Dec 2016"
}, {
"label": "Jan 2017"
}, {
"label": "Feb 2017"
}, {
"label": "Mar 2017"
}, {
"label": "Apr 2017"
}, {
"label": "May 2017"
}, {
"label": "Jun 2017"
}, {
"label": "Jul 2017"
}, {
"label": "Aug 2017"
}, {
"label": "Sep 2017"
}, {
"label": "Oct 2017"
}, {
"label": "Nov 2017"
}, {
"label": "Dec 2017"
}]
}],
"dataset": [{
"seriesName": "Actual Revenue",
"data": [{
"value": "16000"
}, {
"value": "20000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "15000"
}, {
"value": "21000"
}, {
"value": "16000"
}, {
"value": "20000"
}, {
"value": "17000"
}, {
"value": "25000"
}, {
"value": "19000"
}, {
"value": "23000"
}, {
"value": "22000"
}, {
"value": "25000"
}, {
"value": "21000"
}, {
"value": "23000"
}, {
"value": "27000"
}, {
"value": "26000"
}, {
"value": "24000"
}, {
"value": "28000"
}, {
"value": "26000"
}, {
"value": "27000"
}, {
"value": "29000"
}, {
"value": "26000"
}]
}, {
"seriesName": "Projected Revenue",
"renderAs": "line",
"showValues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}, {
"value": "24000"
}, {
"value": "22000"
}, {
"value": "23000"
}, {
"value": "25000"
}, {
"value": "22000"
}, {
"value": "20000"
}, {
"value": "24000"
}, {
"value": "25000"
}, {
"value": "27000"
}, {
"value": "24000"
}, {
"value": "23000"
}, {
"value": "25000"
}]
}, {
"seriesName": "Profit",
"renderAs": "area",
"showValues": "0",
"data": [{
"value": "4000"
}, {
"value": "5000"
}, {
"value": "3000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "7000"
}, {
"value": "1000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "8000"
}, {
"value": "2000"
}, {
"value": "7000"
}, {
"value": "6000"
}, {
"value": "5000"
}, {
"value": "7000"
}, {
"value": "8000"
}, {
"value": "8000"
}, {
"value": "9000"
}, {
"value": "7000"
}, {
"value": "10000"
}, {
"value": "9000"
}, {
"value": "7000"
}, {
"value": "8000"
}, {
"value": "11000"
}]
}]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the scroll stacked column 2D chart.
Scroll Combination 2D Dual Y-axis Chart
To create a scroll combination 2D chart with a dual y-axis, change the value of the type attribute to scrollcombidy2d. Here we will plot the revenue and the profit earned, in dollars, and the profit percent for FY 2017-FY 2018.
For a detailed list of attributes, refer to the chart attributes page of croll combination 2D dual y-axis chart.
The scroll combination 2D chart (dual Y) chart thus created looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Revenues and Profits",
"subCaption": "(2016 to 2017)",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"showValues": "1",
"numVisiblePlot": "12",
"flatScrollBars": "1",
"scrollheight": "10"
},
"categories": [
{
"category": [
{
"label": "Jan 2016"
},
{
"label": "Feb 2016"
},
{
"label": "Mar 2016"
},
{
"label": "Apr 2016"
},
{
"label": "May 2016"
},
{
"label": "Jun 2016"
},
{
"label": "Jul 2016"
},
{
"label": "Aug 2016"
},
{
"label": "Sep 2016"
},
{
"label": "Oct 2016"
},
{
"label": "Nov 2016"
},
{
"label": "Dec 2016"
},
{
"label": "Jan 2017"
},
{
"label": "Feb 2017"
},
{
"label": "Mar 2017"
},
{
"label": "Apr 2017"
},
{
"label": "May 2017"
},
{
"label": "Jun 2017"
},
{
"label": "Jul 2017"
},
{
"label": "Aug 2017"
},
{
"label": "Sep 2017"
},
{
"label": "Oct 2017"
},
{
"label": "Nov 2017"
},
{
"label": "Dec 2017"
}
]
}
],
"dataset": [
{
"seriesName": "Revenues",
"data": [
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "22000"
},
{
"value": "19000"
},
{
"value": "23000"
},
{
"value": "24000"
},
{
"value": "25000"
},
{
"value": "26000"
},
{
"value": "24000"
},
{
"value": "19000"
},
{
"value": "22000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "22000"
},
{
"value": "21000"
},
{
"value": "23000"
},
{
"value": "24000"
}
]
},
{
"seriesName": "Profits",
"renderAs": "area",
"showValues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
},
{
"value": "6000"
},
{
"value": "7000"
},
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "9000"
},
{
"value": "2000"
},
{
"value": "6000"
},
{
"value": "2000"
},
{
"value": "7000"
},
{
"value": "4000"
},
{
"value": "6000"
}
]
},
{
"seriesName": "Profit %",
"parentYAxis": "S",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "25"
},
{
"value": "25"
},
{
"value": "16.66"
},
{
"value": "21.05"
},
{
"value": "6.66"
},
{
"value": "33.33"
},
{
"value": "6.25"
},
{
"value": "25"
},
{
"value": "5.88"
},
{
"value": "36.36"
},
{
"value": "10.52"
},
{
"value": "30.43"
},
{
"value": "25"
},
{
"value": "28"
},
{
"value": "15.38"
},
{
"value": "20.83"
},
{
"value": "15.79"
},
{
"value": "40.91"
},
{
"value": "11.11"
},
{
"value": "31.58"
},
{
"value": "9.09"
},
{
"value": "33.33"
},
{
"value": "17.39"
},
{
"value": "25"
}
]
}
]
}<chart theme="fusion" caption="Revenues and Profits" subcaption="(2016 to 2017)" xaxisname="Month" pyaxisname="Amount (In USD)" syaxisname="Profit %" numberprefix="$" snumbersuffix="%" syaxismaxvalue="50" showvalues="1" numvisibleplot="12" flatscrollbars="1" scrollheight="10">
<categories>
<category label="Jan 2016" />
<category label="Feb 2016" />
<category label="Mar 2016" />
<category label="Apr 2016" />
<category label="May 2016" />
<category label="Jun 2016" />
<category label="Jul 2016" />
<category label="Aug 2016" />
<category label="Sep 2016" />
<category label="Oct 2016" />
<category label="Nov 2016" />
<category label="Dec 2016" />
<category label="Jan 2017" />
<category label="Feb 2017" />
<category label="Mar 2017" />
<category label="Apr 2017" />
<category label="May 2017" />
<category label="Jun 2017" />
<category label="Jul 2017" />
<category label="Aug 2017" />
<category label="Sep 2017" />
<category label="Oct 2017" />
<category label="Nov 2017" />
<category label="Dec 2017" />
</categories>
<dataset seriesname="Revenues">
<set value="16000" />
<set value="20000" />
<set value="18000" />
<set value="19000" />
<set value="15000" />
<set value="21000" />
<set value="16000" />
<set value="20000" />
<set value="17000" />
<set value="22000" />
<set value="19000" />
<set value="23000" />
<set value="24000" />
<set value="25000" />
<set value="26000" />
<set value="24000" />
<set value="19000" />
<set value="22000" />
<set value="18000" />
<set value="19000" />
<set value="22000" />
<set value="21000" />
<set value="23000" />
<set value="24000" />
</dataset>
<dataset seriesname="Profits" renderas="area" showvalues="0">
<set value="4000" />
<set value="5000" />
<set value="3000" />
<set value="4000" />
<set value="1000" />
<set value="7000" />
<set value="1000" />
<set value="4000" />
<set value="1000" />
<set value="8000" />
<set value="2000" />
<set value="7000" />
<set value="6000" />
<set value="7000" />
<set value="4000" />
<set value="5000" />
<set value="3000" />
<set value="9000" />
<set value="2000" />
<set value="6000" />
<set value="2000" />
<set value="7000" />
<set value="4000" />
<set value="6000" />
</dataset>
<dataset seriesname="Profit %" parentyaxis="S" renderas="line" showvalues="0">
<set value="25" />
<set value="25" />
<set value="16.66" />
<set value="21.05" />
<set value="6.66" />
<set value="33.33" />
<set value="6.25" />
<set value="25" />
<set value="5.88" />
<set value="36.36" />
<set value="10.52" />
<set value="30.43" />
<set value="25" />
<set value="28" />
<set value="15.38" />
<set value="20.83" />
<set value="15.79" />
<set value="40.91" />
<set value="11.11" />
<set value="31.58" />
<set value="9.09" />
<set value="33.33" />
<set value="17.39" />
<set value="25" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'scrollcombidy2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Revenues and Profits",
"subCaption": "(2016 to 2017)",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"showValues": "1",
"numVisiblePlot": "12",
"flatScrollBars": "1",
"scrollheight": "10"
},
"categories": [{
"category": [{
"label": "Jan 2016"
},
{
"label": "Feb 2016"
},
{
"label": "Mar 2016"
},
{
"label": "Apr 2016"
},
{
"label": "May 2016"
},
{
"label": "Jun 2016"
},
{
"label": "Jul 2016"
},
{
"label": "Aug 2016"
},
{
"label": "Sep 2016"
},
{
"label": "Oct 2016"
},
{
"label": "Nov 2016"
},
{
"label": "Dec 2016"
},
{
"label": "Jan 2017"
},
{
"label": "Feb 2017"
},
{
"label": "Mar 2017"
},
{
"label": "Apr 2017"
},
{
"label": "May 2017"
},
{
"label": "Jun 2017"
},
{
"label": "Jul 2017"
},
{
"label": "Aug 2017"
},
{
"label": "Sep 2017"
},
{
"label": "Oct 2017"
},
{
"label": "Nov 2017"
},
{
"label": "Dec 2017"
}
]
}],
"dataset": [{
"seriesName": "Revenues",
"data": [{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "22000"
},
{
"value": "19000"
},
{
"value": "23000"
},
{
"value": "24000"
},
{
"value": "25000"
},
{
"value": "26000"
},
{
"value": "24000"
},
{
"value": "19000"
},
{
"value": "22000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "22000"
},
{
"value": "21000"
},
{
"value": "23000"
},
{
"value": "24000"
}
]
},
{
"seriesName": "Profits",
"renderAs": "area",
"showValues": "0",
"data": [{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
},
{
"value": "6000"
},
{
"value": "7000"
},
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "9000"
},
{
"value": "2000"
},
{
"value": "6000"
},
{
"value": "2000"
},
{
"value": "7000"
},
{
"value": "4000"
},
{
"value": "6000"
}
]
},
{
"seriesName": "Profit %",
"parentYAxis": "S",
"renderAs": "line",
"showValues": "0",
"data": [{
"value": "25"
},
{
"value": "25"
},
{
"value": "16.66"
},
{
"value": "21.05"
},
{
"value": "6.66"
},
{
"value": "33.33"
},
{
"value": "6.25"
},
{
"value": "25"
},
{
"value": "5.88"
},
{
"value": "36.36"
},
{
"value": "10.52"
},
{
"value": "30.43"
},
{
"value": "25"
},
{
"value": "28"
},
{
"value": "15.38"
},
{
"value": "20.83"
},
{
"value": "15.79"
},
{
"value": "40.91"
},
{
"value": "11.11"
},
{
"value": "31.58"
},
{
"value": "9.09"
},
{
"value": "33.33"
},
{
"value": "17.39"
},
{
"value": "25"
}
]
}
]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the scroll combination 2D chart with a dual y-axis.
Now, let's customize the appearance and properties of the charts.
Configure the Number of Visible Data Plots
Scroll charts are generally used to avoid cluttering. With that in FusionCharts, you can also configure the number of data plots that will be visible in the scroll pane when the chart is first loaded. To configure this specify the number of visible plots using the numVisiblePlot attribute.
Refer to the code given below:
{
"chart": {
"numVisiblePlot": "12"
}
}A scroll chart with the number of visible data plots set to twelve looks like this:
FusionCharts will load here..
Click here to edit the scroll column 2D chart.
Render a Scroll Bar with 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. To render the scroll in gradient set the flatScrollBars attribute to 0.
Refer to the code given below:
{
"chart": {
"flatScrollBars": "0"
}
}A scroll chart with a gradient scroll bar looks like this:
FusionCharts will load here..
Click here to edit the scroll column 2D chart.
Customizing the Scroll Bar
The scroll bar of the scroll chart can be customized using the cosmetic properties. To the customize the scroll bar, follow the steps below:
Specify the hex code for the scroll color code using the
scrollColorattribute.Specify the height of the scroll bar using the
scrollHeightattribute.Set the distance of the scroll bar from the canvas using the
scrollPaddingattribute.
Refer to the code given below:
{
"chart": {
"scrollColor": "#3a4660",
"scrollHeight": "12",
"scrollPadding": "5"
}
}A scroll chart with the cosmetic properties of the scroll bar customized looks like this:
FusionCharts will load here..
Click here to edit the scroll column 2D chart.