Stacked Charts

Now that Harry has a sense of his current year revenues, customer satisfaction score, how each state in US is performing, and quarterly perfomance of his stores over the last 2 years, Harry wants to know the split of revenue between Food and Non-food products for his SuperMart.

Stacked charts are used to show sum of constituents as a composition in a visualization. While in a multi-series chart, each series is plotted next to each other to aid visual comparison, in a stacked chart, they are plotted on top of each other, to form a single column. Each segment of the column constitutes to the total of this column, and is used to visualize the sum of parts.

The stacked chart, once built for Harry, would look as under:

FusionCharts should load here..

The data for this chart is represented in the table below:

Quarter Food Products Non Food Products
Quarter 1 $11,000 $11,400
Quarter 2 $15,000 $14,800
Quarter 3 $13,500 $8,300
Quarter 4 $15,000 $11,800

Let's Begin

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 map 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 Stacked 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 Suite XT JavaScript 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 stackedChart = new FusionCharts({
        "type": "stackedcolumn2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
           "chart": {
              "caption": "Revenue split by product category",
              "subCaption": "For current year",
              "xAxisname": "Quarter",
              "yAxisName": "Revenues (In USD)",
              "showSum": "1",
              "numberPrefix": "$",
              "theme": "fint"
           },
           "categories": [
              {
                 "category": [
                    {
                       "label": "Q1"
                    },
                    {
                       "label": "Q2"
                    },
                    {
                       "label": "Q3"
                    },
                    {
                       "label": "Q4"
                    }
                 ]
              }
           ],
           "dataset": [
              {
                 "seriesname": "Food Products",
                 "data": [
                    {
                       "value": "11000"
                    },
                    {
                       "value": "15000"
                    },
                    {
                       "value": "13500"
                    },
                    {
                       "value": "15000"
                    }
                 ]
              },
              {
                 "seriesname": "Non-Food Products",
                 "data": [
                    {
                       "value": "11400"
                    },
                    {
                       "value": "14800"
                    },
                    {
                       "value": "8300"
                    },
                    {
                       "value": "11800"
                    }
                 ]
              }
           ]
        }
      });

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

In the above code, we:

  • Created an instance of FusionCharts object in the revenueChart 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 stackedcolumn2d chart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart. In this case, we are creating an instance of a Stacked Column 2D chart with dimensions of 500x300 pixels, and providing JSON data as a string.

  • 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 used in this example looks like:

<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 stackedChart = new FusionCharts({
        "type": "stackedcolumn2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
           "chart": {
              "caption": "Revenue split by product category",
              "subCaption": "For current year",
              "xAxisname": "Quarter",
              "yAxisName": "Revenues (In USD)",
              "showSum": "1",
              "numberPrefix": "$",
              "theme": "fint"
           },
           "categories": [
              {
                 "category": [
                    {
                       "label": "Q1"
                    },
                    {
                       "label": "Q2"
                    },
                    {
                       "label": "Q3"
                    },
                    {
                       "label": "Q4"
                    }
                 ]
              }
           ],
           "dataset": [
              {
                 "seriesname": "Food Products",
                 "data": [
                    {
                       "value": "11000"
                    },
                    {
                       "value": "15000"
                    },
                    {
                       "value": "13500"
                    },
                    {
                       "value": "15000"
                    }
                 ]
              },
              {
                 "seriesname": "Non-Food Products",
                 "data": [
                    {
                       "value": "11400"
                    },
                    {
                       "value": "14800"
                    },
                    {
                       "value": "8300"
                    },
                    {
                       "value": "11800"
                    }
                 ]
              }
           ]
        }
    });

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

Using this stacked chart, you can easily tell that the revenue generated for the first quarter of the current year is $22.4K and the revenue generated by food and non-food products individually are $11K and $11.4K, respectively.

100% Stacked Chart showing percentage distribution

The stacked chart that we just built for Harry shows the revenue split for each quarter, between Food and Non-food numbers, in absolute sales numbers. For example, if you hover over Food Products for Q1, you can see the sales as $11K. Harry now wants to convert these relative numbers to percentage, so that he can know what % of sales in Q1 was from Food Products. This a special kind of stacked chart called 100% Stacked Charts. The y-axis, instead of representing the actual data values, represents percentage.

The stacked column 2D chart with percentage distribution looks like this:

FusionCharts should load here..

It uses the same data structure as the normal stacked chart, with the addition of 2 new attributes given below:

Attribute Description
stack100Percent If set to 1, indicates that the stacked chart will be rendered as a 100% stacked chart.
decimals It sets the number of digits that will be shown after the decimal point.

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

<html>
<head>
<title>My First Stacked Chart with Percentage Distribution</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script>
FusionCharts.ready(function () {
    var stackedChart = new FusionCharts({
        "type": "stackedcolumn2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource":  {
           "chart": {
              "caption": "Revenue split by product category",
              "subCaption": "For current year",
              "xAxisname": "Quarter",
              "yAxisName": "% Revenue",
              "numberPrefix": "$",
              "stack100Percent": "1",
              "decimals": "0",
              "theme": "fint"
           },
           "categories": [
              {
                 "category": [
                    {
                       "label": "Q1"
                    },
                    {
                       "label": "Q2"
                    },
                    {
                       "label": "Q3"
                    },
                    {
                       "label": "Q4"
                    }
                 ]
              }
           ],
           "dataset": [
              {
                 "seriesname": "Food Products",
                 "data": [
                    {
                       "value": "11000"
                    },
                    {
                       "value": "15000"
                    },
                    {
                       "value": "13500"
                    },
                    {
                       "value": "15000"
                    }
                 ]
              },
              {
                 "seriesname": "Non-Food Products",
                 "data": [
                    {
                       "value": "11400"
                    },
                    {
                       "value": "14800"
                    },
                    {
                       "value": "8300"
                    },
                    {
                       "value": "11800"
                    }
                 ]
              }
           ]
        }
   });

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

With this, you have built your first 100% stacked chart. In the next part we will look at Combination Charts where you can plot multiple chart types on the same chart.

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

Multi Series Charts
Combination Charts