Creating a Scroll Chart

The FusionCharts Suite XT includes charts with scrolls that allow you to plot large quantities of data.

In this section, you will be introduced to the basics of scroll charts and how you can create simple scroll charts.

Basics of Scroll Charts

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)

A scroll column 2D chart looks like this:

FusionCharts should load here..

A scroll stacked column 2D chart looks like this:

FusionCharts should load here..

Creating a Scroll Chart

As an example, we will create a scroll combination 2D chart with a dual y-axis to plot the revenue and the profit earned, in dollars, and the profit percent for FY 2012-FY 2013.

The scroll combination 2D chart (dual Y) chart thus created looks like this :

FusionCharts should load here..

The data structure needed to render the above scroll combination chart is given below:

...

Brief Explanation of the Data Structure

In the JSON data, the attributes and their corresponding values are written in the following key-value pair format:

"<attributeName>": "<value>"

Given below is a brief description of the data structure used to create the above scroll combination 2D (dual Y) chart:

Attribute Name Description
type It is used to specify the type of chart you want to render. For example, to render a scroll combination 2D (dual Y) chart, the value for this attribute will be scrollcombidy2d.
renderAt It is used to specify the container object where the chart will be rendered.
width It is used to specify the width of the chart.
height It is used to specify the height of the chart.
dataFormat It is used to specify the type of data that will passed to the chart object. This attribute takes two values: json, where the JSON data to render the chart is passed to the dataSource attribute, and jsonurl, where the relative path to a .json file is passed to the dataSource attribute.
dataSource It specifies the source from where the data will be fetched, depending on the value passed to the dataFormat attribute.
caption It is used to specify the chart caption. This attribute belongs to the chart object.
subCaption It is used to specify the chart sub-caption. This attribute belongs to the chart object.
xAxisName It is used to specify the name for the x-axis.
pYAxisName It is used to specify the name for the primary y-axis.
sYAxisName It is used to specify the name for the secondary y-axis.
numberPrefix It is used to specify the character that will precede all numeric values on the chart, e.g. $ for the currency symbol.
sNumberSuffix It is used to specify the character that will be appended to all numeric values plotted against the secondary y-axis, e.g. % for the percentage sign.
sYAxisMaxValue It is used to explicitly specify the upper limit for the secondary y-axis. By default, the chart automatically calculates the upper limit based on the data you provide.
numVisiblePlot It is used to specify the number of data plots that will be visible in the scroll pane when the chart is first loaded.
theme It is used to specify the theme for the chart.
label It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the category object array, which in turn belongs to the categories object array.
value It is used to specify the value for a data item. This attribute belongs to the data object array, which in turn belongs to the dataset object array.
seriesName It is used to specify a name for the dataset. This name is shown in the legend box rendered below the chart. This attribute belongs to the dataset object array.

There! You have now understood the basics of scroll charts and seen how you can create one.