Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

As an example, we will create the Global Wealth Pyramid (Credit Suisse 2013) - a pyramid chart that visualizes how the world’s wealth is broken.

To create a pyramid chart, you will first need to plot the data that will be represented by the chart. For our example, this data is shown in the table below:

Number of People Wealth owned (In trillion USD)

Top 32 mn (0.7%)

98.7

Next 361 mn (7.7%)

101.8

Next 1.1 bn (22.9%)

33.0

Last 3.2 bn (68.7%)

7.3

We will configure the “Number of People” as the label of the chart and the “Wealth Owned” as the value of the chart. The resultant Global Wealth Pyramid chart looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "The Global Wealth Pyramid", "captionOnTop": "0", "captionPadding": "25", "alignCaptionWithCanvas": "1", "subcaption": "Credit Suisse 2013", "subCaptionFontSize": "12", "borderAlpha": "20", "is2D": "1", "bgColor": "#ffffff", "showValues": "1", "numberPrefix": "$", "numberSuffix": "M", "plotTooltext": "$label of world population is worth USD $value tn ", "showPercentValues": "1", "chartLeftMargin": "40" }, "data": [ { "label": "Top 32 mn (0.7%)", "value": "98.7" }, { "label": "Next 361 mn (7.7%)", "value": "101.8" }, { "label": "Next 1.1 bn (22.9%)", "value": "33" }, { "label": "Last 3.2 bn (68.7%)", "value": "7.3" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "The Global Wealth Pyramid",
        "captionOnTop": "0",
        "captionPadding": "25",
        "alignCaptionWithCanvas": "1",
        "subcaption": "Credit Suisse 2013",
        "subCaptionFontSize": "12",
        "borderAlpha": "20",
        "is2D": "1",
        "bgColor": "#ffffff",
        "showValues": "1",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "plotTooltext": "$label of world population is worth USD $value tn ",
        "showPercentValues": "1",
        "chartLeftMargin": "40"
    },
    "data": [
        {
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        },
        {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        },
        {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        },
        {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pyramid',
    renderAt: 'chart-container',
    id: 'wealth-pyramid-chart',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "The Global Wealth Pyramid",
            "captionOnTop": "0",
            "captionPadding": "25",
            "alignCaptionWithCanvas": "1",
            "subcaption": "Credit Suisse 2013",
            "subCaptionFontSize": "12",
            "borderAlpha": "20",
            "is2D": "1",
            "bgColor": "#ffffff",
            "showValues": "1",
            "numberPrefix": "$",
            "numberSuffix": "M",
            "plotTooltext": "$label of world population is worth USD $value tn ",
            "showPercentValues": "1",
            "chartLeftMargin": "40"
        },
        "data": [{
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        }, {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        }, {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        }, {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to create the Global Wealth Pyramid chart:

Attribute Name Description

value

It is used to show the numerical value for the data represented by a pyramid segment. For example, for the slice representing the “Next 361 mn (7.7%)” people, the value will be 101.8. This attribute belongs to the data object.

label

It is used to specify the label to be be rendered for a pyramid segment, e.g. “Last 3.2 bn (68.7%)”. This attribute belongs to the data object.

Top