Loading
Scrollable Charts
FusionCharts Suite XT includes scrollable charts - charts that allow you to plot large quantities of data on one chart and then scroll through to view only as much data as required.
At present, scrollable charts include the following chart types:
-
Scroll Column 2D
-
Scroll Line 2D
-
Scroll Area 2D
-
Scroll Stacked Column 2D
-
Scroll Combination 2D (Single Y-axis)
-
Scroll Combination 2D (Dual Y-axis)
A scroll combination 2D (Dual Y-axis) chart looks like this:
FusionCharts will load here..
The chart above plots the revenue, profits, and the profit percent for every month of FY 2012 to FY 2013. This means that we have 24 data plots to be shown on the chart, which will not fit into the specified chart width. Because of the scroll bar, however, we have configured the above chart to show only 12 data plots when it first renders. To view the remaining data plots, you can use the scroll bar. This allows better space management.
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "(FY 2012 to FY 2013)",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"showAlternateHGridColor": "0",
"showPlotBorder": "0",
"usePlotGradientColor": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"showCanvasBorder": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"showValues": "1",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"numVisiblePlot": "12",
"flatScrollBars": "1",
"scrollheight": "10"
},
"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": [
{
"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": {
"caption": "Revenues and Profits",
"subCaption": "(FY 2012 to FY 2013)",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"showAlternateHGridColor": "0",
"showPlotBorder": "0",
"usePlotGradientColor": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"showCanvasBorder": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"showValues": "1",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"numVisiblePlot": "12",
"flatScrollBars": "1",
"scrollheight": "10"
},
"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": [
{
"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"
}
]
}
]
}For more information on how you can configure scroll bars, click here.
Scrollable Chart Events
Scrollable charts include support for the following scroll-specific events:
-
scrollStart
-
scrollEnd
The above scroll combination 2D (Dual Y-axis) chart configured to listen to these events is shown below:
FusionCharts will load here..
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "(FY 2012 to FY 2013)",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"showAlternateHGridColor": "0",
"showPlotBorder": "0",
"usePlotGradientColor": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"showCanvasBorder": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"showValues": "1",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"numVisiblePlot": "12",
"flatScrollBars": "1",
"scrollheight": "10"
},
"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": [
{
"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": {
"caption": "Revenues and Profits",
"subCaption": "(FY 2012 to FY 2013)",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"paletteColors": "#0075c2,#1aaf5d,#f2c500",
"showAlternateHGridColor": "0",
"showPlotBorder": "0",
"usePlotGradientColor": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"canvasBgColor": "#ffffff",
"showCanvasBorder": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"showValues": "1",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"numVisiblePlot": "12",
"flatScrollBars": "1",
"scrollheight": "10"
},
"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": [
{
"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"
}
]
}
]
}Given below is a brief description of the scroll-specific events:
| Name | What is it and when is it raised? | Event parameters |
|---|---|---|
|
This event is fired when a chart starts scrolling from a point. |
The event arguments provided in the advanced model are: |
|
This event is fired when a chart has stopped scrolling. |
The event arguments provided in the advanced model are: |