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 should 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:

...

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 should load here..
The data structure needed to render the above chart is given below:

...

Given below is a brief description of the scroll-specific events:

Name What is it and when is it raised? Event parameters
scrollStart This event is fired when a chart starts scrolling from a point. The event arguments provided in the advanced model are:
eventObject : This object contains the eventId, eventType, and sender properties.
argumentsObject : This object contains the properties listed below:
    scrollPosition : It specifies the x position of the scroll. This attribute takes values between 0 and 1. 0 indicates the start position, 1 indicates the end position.
scrollEnd This event is fired when a chart has stopped scrolling. The event arguments provided in the advanced model are:
eventObject : This object contains the eventId, eventType and, sender properties.
argumentsObject : This object contains properties listed below:
    prevScrollPosition : The x position of the scroll from where the last scrolling action ended. This attribute takes values between 0 and 1. 0 indicates the start position, 1 indicates the end position.
    scrollPosition : It specifies the x position of the scroll. This attribute takes values between 0 and 1. 0 indicates the start position, 1 indicates the end position.
Introduction
Legends