Loading

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 will load here..

A scroll stacked column 2D chart looks like this:

FusionCharts will 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 will load here..

The data structure needed to render the above scroll combination 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"
                }
            ]
        }
    ]
}

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.

Top