Loading
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:
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:
{
"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:
Given below is a brief description of the data structure used to create the above scroll combination 2D (dual Y) chart:
| Attribute Name | Description |
|---|---|
|
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 |
|
It is used to specify the container object where the chart will be rendered. |
|
It is used to specify the width of the chart. |
|
It is used to specify the height of the chart. |
|
It is used to specify the type of data that will passed to the chart object. This attribute takes two values: |
|
It specifies the source from where the data will be fetched, depending on the value passed to the |
|
It is used to specify the chart caption. This attribute belongs to the |
|
It is used to specify the chart sub-caption. This attribute belongs to the |
|
It is used to specify the name for the x-axis. |
|
It is used to specify the name for the primary y-axis. |
|
It is used to specify the name for the secondary y-axis. |
|
It is used to specify the character that will precede all numeric values on the chart, e.g. |
|
It is used to specify the character that will be appended to all numeric values plotted against the secondary y-axis, e.g. |
|
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. |
|
It is used to specify the number of data plots that will be visible in the scroll pane when the chart is first loaded. |
|
It is used to specify the theme for the chart. |
|
It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the |
|
It is used to specify the value for a data item. This attribute belongs to the |
|
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 |
There! You have now understood the basics of scroll charts and seen how you can create one.