Loading

Combination charts allow you to use more than one chart types on same chart canvas to plot your data.

In this section, you will be shown how you can:

  • Plot trend elements

  • Format Numbers

  • Place the secondary y-axis on the left

Plotting Trend Elements

For a dual y-axis chart, you can plot trend-lines with respect to both, the primary y-axis and the secondary y-axis.

A combination chart rendered with two trend-lines looks like this:

FusionCharts will load here..

In the above chart, the Average Revenue trend-line has been plotted against the primary y-axis that shows the amount in USD. The Average Profit % trend-line has been plotted against the secondary y-axis that shows the profit %.

Given below is a brief description of the attributes used to render a trend-line/trend-zone:

Attribute Name Description

startValue

It is used to specify the starting value for the trend-line. This attribute belongs to the line object, which in turn belongs to the trendline object.

endValue

It is used to specify the ending value for the trend-line. It is specified when you want to render a slanted trend-line. This attribute belongs to the line object, which in turn belongs to the trendline object.

color

It is used to specify the hex code for the color that will be used to render a trend-line and its associated text. This attribute belongs to the line object, which in turn belongs to the trendline object.

displayValue

It is used to specify a string caption to be displayed with the trend-line. This attribute belongs to the line object, which in turn belongs to the trendline object.

If you don’t specify a value for this attribute, by default, it will take the value of the startValue attribute.

isTrendZone

It is used to specify whether a chart will be rendered with a trend-line or a trend-zone. Setting this attribute to 0 will render a trend-line, setting it to 1 (default) will render a trend-zone. This attribute belongs to the line object, which in turn belongs to the trendlines object.

valuePadding

It is used to specify the empty space to be rendered, pixels, between the top-end of a data plot and the start of its corresponding value text box.

parentYAxis

It is used to specify the parent axis of a dataset. This attribute takes two values: p (default) and s. To plot a trend-line against the secondary y-axis, set this attribute to s.

The data structure needed to render trend-lines for the primary and secondary axes is given below:

{ "chart": { "caption": "Revenues and Profits", "subCaption": "For last year", "xAxisname": "Month", "pYAxisName": "Amount (In USD)", "sYAxisName": "Profit %", "numberPrefix": "$", "sNumberSuffix": "%", "sYAxisMaxValue": "50", "numDivLines": "3", "theme": "fint" }, "categories": [ { "category": [ { "label": "Jan" }, { "label": "Feb" }, { "label": "Mar" }, { "label": "Apr" }, { "label": "May" }, { "label": "Jun" }, { "label": "Jul" }, { "label": "Aug" }, { "label": "Sep" }, { "label": "Oct" }, { "label": "Nov" }, { "label": "Dec" } ] } ], "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" } ] }, { "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" } ] }, { "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" } ] } ], "trendlines": [ { "line": [ { "startValue": "18833", "color": "#0075c2", "valuePadding": "20", "displayvalue": "Average{br}Revenue" }, { "startValue": "21", "parentYAxis": "s", "color": "#f2c500", "displayvalue": "Average{br}Profit %" } ] } ] }
{
    "chart": {
        "caption": "Revenues and Profits",
        "subCaption": "For last year",
        "xAxisname": "Month",
        "pYAxisName": "Amount (In USD)",
        "sYAxisName": "Profit %",
        "numberPrefix": "$",
        "sNumberSuffix": "%",
        "sYAxisMaxValue": "50",
        "numDivLines": "3",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan"
                },
                {
                    "label": "Feb"
                },
                {
                    "label": "Mar"
                },
                {
                    "label": "Apr"
                },
                {
                    "label": "May"
                },
                {
                    "label": "Jun"
                },
                {
                    "label": "Jul"
                },
                {
                    "label": "Aug"
                },
                {
                    "label": "Sep"
                },
                {
                    "label": "Oct"
                },
                {
                    "label": "Nov"
                },
                {
                    "label": "Dec"
                }
            ]
        }
    ],
    "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"
                }
            ]
        },
        {
            "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"
                }
            ]
        },
        {
            "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"
                }
            ]
        }
    ],
    "trendlines": [
        {
            "line": [
                {
                    "startValue": "18833",
                    "color": "#0075c2",
                    "valuePadding": "20",
                    "displayvalue": "Average{br}Revenue"
                },
                {
                    "startValue": "21",
                    "parentYAxis": "s",
                    "color": "#f2c500",
                    "displayvalue": "Average{br}Profit %"
                }
            ]
        }
    ]
}

FusionCharts Suite XT includes several options to customize trend elements. To know more about the trend elements in a single y-axis chart, click here. To know more about the dual y-axis chart, click here.

Formatting Numbers on the Chart

FusionCharts Suite XT includes separate configuration attributes to format numbers for the primary and secondary y-axes. Some of these attributes have been briefly described here.

Given below is a brief description of the number formatting attributes for the primary y-axis:

Attribute Name Description

formatNumber

It is used to specify whether the numbers displayed on the chart will be formatted using commas. Setting this attribute to 1 will format the numbers using commas, e.g. 40,000. Setting it to 0 will format the numbers without commas, e.g. 40000.

formatNumberScale

It is used to specify whether a K (for thousands) or an M (for millions) will be added to a number after truncating and rounding it. Setting this number to 0 will disable this feature, setting it to 1 (default) will enable it.
Example: If formatNumberScale is set to 1, 1043 will become 1.04K (with decimals set to 2 places).

defaultNumberScale

It is used to specify the default unit for the numbers rendered on the chart.

numberScaleUnit

It is used to specify the unit for a block of the scale.

numberScaleValue

It is used to specify the range of the various blocks that constitute the scale.

scaleRecursively

It is used to specify whether recursive scaling will be enabled for the chart.

numberPrefix

It is used to specify the character that will precede all numeric values on the chart, e.g. $ for the currency symbol.

numberSuffix

It is used to specify the character that will be appended to all numeric values on the chart, e.g. % for percentages.

The above attributes are applicable to the primary y-axis. To use these attributes for the secondary y-axis, precede the attribute name with an s. For example, numberPrefix becomes sNumberPrefix.

Few of important number formatting attributes for secondary y-axis

Attribute Name Description

sFormatNumber

This configuration determines whether the numbers belonging to secondary axis will be formatted using commas, e.g., 40,000 if sFormatNumber='1' and 40000 if sFormatNumber= '0'.

sFormatNumberScale

Configuration whether to add K (thousands) and M (millions) to a number belonging to secondary axis after truncating and rounding it - e.g., if sFormatNumberScale is set to 1, 10434 will become 1.04K (with decimalPrecision set to 2 places). Same with numbers in millions - an M will be added at the end.

sDefaultNumberScale

The default unit of the numbers belonging to secondary axis.

sNumberScaleUnit

Unit of each block of the scale of secondary y-axis.

sNumberScaleValue

Range of the various blocks that constitute the scale for secondary y-axis.

sScaleRecursively

To scale the numbers recursively only for the secondary y-axis you need to set this attribute to ‘1’.

sNumberPrefix

Using this attribute, you could add prefix to all the numbers belonging to secondary axis.

sNumberSuffix

Using this attribute, you could add prefix to all the numbers belonging to secondary axis.

For the complete list of number formatting attributes available for both the axes, refer to the number formatting section here.

Placing the Secondary Axis on the Left

You can choose to swap positions of the primary and secondary axes.

A combination chart rendered with the positions of the axes swapped looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to swap axis positions:

Attribute Name Description

primaryAxisOnLeft

It is used to specify whether the primary axis and secondary axis positions should be swapped. Setting this attribute to 0 will render the secondary axis on the left and the primary axis on the right, setting it to 1 (default) will render the primary axis on the left and the secondary axis on the right.

The data structure needed to swap axes positions is given below:

{ "chart": { "caption": "Revenues and Profits", "subCaption": "For last year", "xAxisname": "Month", "pYAxisName": "Amount (In USD)", "sYAxisName": "Profit %", "numberPrefix": "$", "sNumberSuffix": "%", "sYAxisMaxValue": "50", "primaryAxisOnLeft": "0", "theme": "fint" }, "categories": [ { "category": [ { "label": "Jan" }, { "label": "Feb" }, { "label": "Mar" }, { "label": "Apr" }, { "label": "May" }, { "label": "Jun" }, { "label": "Jul" }, { "label": "Aug" }, { "label": "Sep" }, { "label": "Oct" }, { "label": "Nov" }, { "label": "Dec" } ] } ], "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" } ] }, { "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" } ] }, { "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" } ] } ] }
{
    "chart": {
        "caption": "Revenues and Profits",
        "subCaption": "For last year",
        "xAxisname": "Month",
        "pYAxisName": "Amount (In USD)",
        "sYAxisName": "Profit %",
        "numberPrefix": "$",
        "sNumberSuffix": "%",
        "sYAxisMaxValue": "50",
        "primaryAxisOnLeft": "0",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Jan"
                },
                {
                    "label": "Feb"
                },
                {
                    "label": "Mar"
                },
                {
                    "label": "Apr"
                },
                {
                    "label": "May"
                },
                {
                    "label": "Jun"
                },
                {
                    "label": "Jul"
                },
                {
                    "label": "Aug"
                },
                {
                    "label": "Sep"
                },
                {
                    "label": "Oct"
                },
                {
                    "label": "Nov"
                },
                {
                    "label": "Dec"
                }
            ]
        }
    ],
    "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"
                }
            ]
        },
        {
            "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"
                }
            ]
        },
        {
            "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"
                }
            ]
        }
    ]
}

There! You have now seen how you can configure combination charts.

Top