Combination Charts

Harry is considering international expansion and needs to present his investors statistics that are strong enough to convince them to invest in his plans. Among the several reports he has to present to his investors, one report includes comparing the revenue earned last year with the projected revenue and the profits earned.

He wants to have the following data series rendered on the same chart:

  • Revenue earned- projected as a column chart
  • Revenue projected - projected as a line chart
  • Profit earned - projected as an area chart

To plot these three distinct data series on the same chart, but each one rendered as a different chart type, we need to use a special type of chart called combination chart. Combination charts let you plot multiple datasets on the same chart, where each dataset can have a different unit and/or magnitude. There are two kinds of combination charts:

  • Single Y-axis Combination Charts - In this type of combination chart, there can be multiple data series, but all series plots against the same axis (primary axis), and hence have the same unit. For example, for the current chart we need to make for Harry, all the datasets refer to either revenue or profit, but have the unit as $.

  • Dual Y Axis Combination Charts - In this type of combination chart, there are two different axis - primary axis and secondary axis, each with a different unit and magnitude. For example, if Harry had to plot revenue vs employees, both data series cannot be plotted on the same axis, and he will need this type of combination chart.

Let’s build the chart that Harry wants on a single y-axis combination chart.

Single Y Axis

The chart where Harry needs to compare actual revenue, projected revenue and profit, would look as under:

FusionCharts should load here..

The data used in this chart is given here

Month Actual Revenue Projected Revenue Profit
Jan $16,000 $15,000 $4,000
Feb $20,000 $16,000 $5,000
March $18,000 $17,000 $3,000
April $19,000 $18,000 $4,000
May $15,000 $19,000 $1,000
June $21,000 $19,000 $7,000
July $16,000 $20,000 $1,000
August $20,000 $19,000 $4,000
September $17,000 $20,000 $1,000
October $25,000 $21,000 $8,000
Nov $19,000 $22,000 $2,000
Dec $23,000 $23,000 $7,000

Creating this chart involves the following steps

  1. Installing FusionCharts Suite XT for your application
  2. Converting your data to a JSON or XML format. FusionCharts Suite XT accepts both data formats, and can read it as a string, or from a file, local or remote
  3. Including the FusionCharts Suite XT JavaScript library in your HTML page
  4. Creating a container <div> for the chart
  5. Using the new FusionCharts() constructor to create the chart instance, and then calling the render() method

Converting your data to FusionCharts Suite XT JSON/XML format

For this example, our dataset, when converted to FusionCharts Suite XT JSON/XML format, looks as under.

...

Including FusionCharts Suite XT in your application

To include the FusionCharts Suite XT JavaScript library in your HTML page, you use the <script> tag as under. Next, we include a theme file to style the chart. The theme is called fint (FusionCharts internal) and it is present in themes folder of your download.

The HTML code needed to do this would look like:

<html>
<head>
<title>My First Combination Chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
</head>
</html>

It informs the browser where to load the FusionCharts library from.

Creating a container for your chart in the web page

Next, you will need to create a container for your chart in the form of a <div> element, as under:

<body>
<div id="chartContainer">A stacked column 2D chart will load here!</div>
</body>

Creating an instance of the chart

The JavaScript code needed to create an instance of this chart would look like

<script type="text/javascript">
FusionCharts.ready(function () {
    var revenueCompChart = new FusionCharts({
        "type": "mscombi2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Actual Revenues, Targeted Revenues & Profits",
                "subCaption": "Last year",
                "xAxisname": "Month",
                "yAxisName": "Amount (In USD)",
                "numberPrefix": "$",
                "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": "Actual Revenue",
                "data": [{
                    "value": "16000"
                }, {
                    "value": "20000"
                }, {
                    "value": "18000"
                }, {
                    "value": "19000"
                }, {
                    "value": "15000"
                }, {
                    "value": "21000"
                }, {
                    "value": "16000"
                }, {
                    "value": "20000"
                }, {
                    "value": "17000"
                }, {
                    "value": "25000"
                }, {
                    "value": "19000"
                }, {
                    "value": "23000"
                }]
            }, {
                "seriesName": "Projected Revenue",
                "renderAs": "line",
                "showValues": "0",
                "data": [{
                    "value": "15000"
                }, {
                    "value": "16000"
                }, {
                    "value": "17000"
                }, {
                    "value": "18000"
                }, {
                    "value": "19000"
                }, {
                    "value": "19000"
                }, {
                    "value": "19000"
                }, {
                    "value": "19000"
                }, {
                    "value": "20000"
                }, {
                    "value": "21000"
                }, {
                    "value": "22000"
                }, {
                    "value": "23000"
                }]
            }, {
                "seriesName": "Profit",
                "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"
                }]
            }]
        }
    });

    revenueCompChart.render();
});
</script>

In the above code we:

  • Created an instance of FusionCharts object in the revenueCompChart variable. Each chart or gauge in your HTML page needs to have a separate variable. The initialization code is wrapped within FusionCharts.ready method. This safeguards your chart instantiation code from being called before FusionCharts Suite XT library is loaded and is ready to be used on the page.

  • Next, we created an instance of mscombi2d chart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart.

  • Next, we specified the width and height of chart (in pixels) using width and height property of the constructor.

  • To specify the data format as JSON, we set the dataFormat parameter to json.

  • Next we used a theme to manage the cosmetic properties of the chart. In this example we used the FusionCharts Internal Theme (fint). You can choose one of the predefined themes that are shipped with FusionCharts Suite XT like ocean , zune and carbon or create your own.

  • The actual JSON data is embedded as string as value of dataSource parameter. The chart object contains a list of key-value pairs that let you configure the functional and cosmetic attributes of your chart. Each category is contained in the categories array with label as key. Each of the series of the data is present within the dataset array, with name of the series as seriesname. The data itself is present within the data array, with revenue with the key as value

  • Call the render method to draw the chart in chart-container <div> element.

The final HTML code needed to create this chart will look like this

<html>
<head>
<title>My First Combination Chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
    var revenueCompChart = new FusionCharts({
        "type": "mscombi2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource":  {
            "chart": {
                "caption": "Actual Revenues, Targeted Revenues & Profits",
                "subCaption": "Last year",
                "xAxisname": "Month",
                "yAxisName": "Amount (In USD)",
                "numberPrefix": "$",
                "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": "Actual Revenue",
                "data": [{
                    "value": "16000"
                }, {
                    "value": "20000"
                }, {
                    "value": "18000"
                }, {
                    "value": "19000"
                }, {
                    "value": "15000"
                }, {
                    "value": "21000"
                }, {
                    "value": "16000"
                }, {
                    "value": "20000"
                }, {
                    "value": "17000"
                }, {
                    "value": "25000"
                }, {
                    "value": "19000"
                }, {
                    "value": "23000"
                }]
            }, {
                "seriesName": "Projected Revenue",
                "renderAs": "line",
                "showValues": "0",
                "data": [{
                    "value": "15000"
                }, {
                    "value": "16000"
                }, {
                    "value": "17000"
                }, {
                    "value": "18000"
                }, {
                    "value": "19000"
                }, {
                    "value": "19000"
                }, {
                    "value": "19000"
                }, {
                    "value": "19000"
                }, {
                    "value": "20000"
                }, {
                    "value": "21000"
                }, {
                    "value": "22000"
                }, {
                    "value": "23000"
                }]
            }, {
                "seriesName": "Profit",
                "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"
                }]
            }]
        }
    });

    revenueCompChart.render();
});
</script>
</head>
<body>
<div id="chartContainer">A stacked column 2D chart will load here!</div>
</body>
</html>

Dual Y Axis

In the previous example, we created a single y-axis combination chart, where all data series could be plotted against the same y-axis (primary y-axis). But what if we had to analyze datasets having different units and magnitude.

Let's say Harry wants to show the revenue and the profit earned over last year as well as the profit percent. Here, we could use a combination chart with a dual y-axis, using a column 2D chart to show the revenue earned, an area chart to show the profits earned, and a line chart to show the profit percent.

Here we need the primary y-axis to represent the amount in $and the secondary y-axis to represent the percent values for profit.

A chart that can help Harry in this situation will look like this

FusionCharts should load here..

The data for this chart looks as under, in a tabular format:

Month Actual Revenue Profit% Actual Profit
Jan $16,000 25% $4,000
Feb $20,000 25% $5,000
March $18,000 16.66% $3,000
April 19,000 21.05% $4,000
May $15,000 6.66% $1,000
June $21,000 33.33% $7,000
July $16,000 6.25% $1,000
August $20,000 25% $4,000
September $17,000 5.88% $1,000
October $25,000 36.36% $8,000
Nov $19,000 10.52% $2,000
Dec $23,000 30.43% $7,000

This data, when converted to FusionCharts JSON/XML format, looks as under:

...

As you can see, the data structure for this chart is almost the same as that of single y-axis chart. The only exceptions are:

  • Since there are 2 y-axis now, the yAxisName attribute no longer applies, and you need to specify pYAxisName and sYAxisName attributes instead. The former lets you specify the title for primary y-axis, and the latter specifies the title for secondary y-axis.

  • For each dataset, you now need to specify whether it should plot on primary axis or secondary. This is done using the "parentYAxis": "S" attribute. It takes a value of P (primary axis) or S (secondary axis).

The final HTML code to generate this example looks like this:

<html>
<head>
<title>My First Multi-Series chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        "type": 'mscombidy2d',
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Revenues and Profits",
                    "subCaption": "For last year",
                    "xAxisname": "Month",
                    "pYAxisName": "Amount (In USD)",
                    "sYAxisName": "Profit %",
                    "numberPrefix": "$",
                    "sNumberSuffix" : "%",
                    "sYAxisMaxValue" : "50",
                    "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"
                }]
            }]
        }
    });

    revenueChart.render();
});
</script>

</head>
<body>
    <div id="chartContainer">A multi-series chart will load here!</div>
</body>
</html>

Was there a problem rendering the chart?

In case something went wrong and you are unable to see the chart, check for the following:

  • If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly.

  • If the chart does not show up at all, but there are no JavaScript errors, check if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if fusioncharts.js was loaded. Check if the path to fusioncharts.js file is correct, and whether the file exists in that location.

  • If you get a Loading Data or Error in loading data message, check whether your JSON data structure is correct, and there are no conflicts related to quotation marks in your code.

Click here for more information on Troubleshooting