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:
A scroll stacked column 2D chart looks like this:
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 :
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.