Creating Pie and Doughnut Charts

A pie chart is a circular chart divided into sectors where the arc length of each sector, its central angle, and its area is proportional to the quantity it represents. A doughnut chart is similar to a pie chart and facilities similar kind of data analysis. The only difference is that a doughnut chart has a blank center - as the name suggests, it looks like a doughnut. FusionCharts Suite XT includes the pie and doughnut charts to plot data that needs to be shown as a percent of the whole.

The FusionCharts Suite XT includes the following types of pie and doughnut charts:

Pie 2D
Pie 3D
Doughnut 2D
Doughnut 3D

Creating a Pie Chart

A simple pie 2D chart showing the split in revenue by product categories for one year looks like this:

FusionCharts will load here..

The data structure needed to create a simple pie 2D chart is given below:

JSON
XML

{ "chart": { "caption": "Split of revenue by product categories", "subCaption": "Last year", "numberPrefix": "$", "showPercentInTooltip": "0", "decimals": "1", "useDataPlotColorForLabels": "1", "theme": "fint" }, "data": [ { "label": "Food", "value": "285040" }, { "label": "Apparels", "value": "146330" }, { "label": "Electronics", "value": "105070" }, { "label": "Household", "value": "49100" } ] }

{
    "chart": {
        "caption": "Split of revenue by product categories",
        "subCaption": "Last year",
        "numberPrefix": "$",
        "showPercentInTooltip": "0",
        "decimals": "1",
        "useDataPlotColorForLabels": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Food",
            "value": "285040"
        },
        {
            "label": "Apparels",
            "value": "146330"
        },
        {
            "label": "Electronics",
            "value": "105070"
        },
        {
            "label": "Household",
            "value": "49100"
        }
    ]
}

To render a pie chart in 3D, change the value of the type attribute from pie2D to pie3D. The rest of the data structure remains the same.

Creating a Doughnut Chart

A doughnut 2D chart showing the split in revenue by product categories for one year looks like this:

FusionCharts will load here..

The data structure needed to create a simple doughnut 2D chart is given below:

JSON
XML

{ "chart": { "caption": "Split of Revenue by Product Categories", "subCaption": "Last year", "numberPrefix": "$", "showBorder": "0", "use3DLighting": "0", "enableSmartLabels": "0", "startingAngle": "310", "showLabels": "0", "showPercentValues": "1", "showLegend": "1", "defaultCenterLabel": "Total revenue: $64.08K", "centerLabel": "Revenue from $label: $value", "centerLabelBold": "1", "showTooltip": "0", "decimals": "0", "useDataPlotColorForLabels": "1", "theme": "fint" }, "data": [ { "label": "Food", "value": "28504" }, { "label": "Apparels", "value": "14633" }, { "label": "Electronics", "value": "10507" }, { "label": "Household", "value": "4910" } ] }

{
    "chart": {
        "caption": "Split of Revenue by Product Categories",
        "subCaption": "Last year",
        "numberPrefix": "$",
        "showBorder": "0",
        "use3DLighting": "0",
        "enableSmartLabels": "0",
        "startingAngle": "310",
        "showLabels": "0",
        "showPercentValues": "1",
        "showLegend": "1",
        "defaultCenterLabel": "Total revenue: $64.08K",
        "centerLabel": "Revenue from $label: $value",
        "centerLabelBold": "1",
        "showTooltip": "0",
        "decimals": "0",
        "useDataPlotColorForLabels": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Food",
            "value": "28504"
        },
        {
            "label": "Apparels",
            "value": "14633"
        },
        {
            "label": "Electronics",
            "value": "10507"
        },
        {
            "label": "Household",
            "value": "4910"
        }
    ]
}

To render a doughnut chart in 3D, change the value of the type attribute from doughnut2D to doughnut3D. The rest of the data structure remains the same.

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:

"<attributeName>": "<value>"

Given below is a brief description of the data structure used to create the above pie and doughnut charts:

Attribute Name	Description
`type`	It is used to specify the type of chart you want to render. For example, to render a pie 2D chart, the value for this attribute will be `pie2d`. For a doughnut 2D chart, it will be `doughnut2d`.
`renderAt`	It is used to specify the container object where the chart will be rendered.
`width`	It is used to specify the width of the chart.
`height`	It is used to specify the height of the chart.
`dataFormat`	It is used to specify the type of data that will passed to the chart object. This attribute takes two values: `json`, where the JSON data to render the chart is passed to the `dataSource` attribute, and `jsonurl`, where the relative path to a .json file is passed to the `dataSource` attribute.
`dataSource`	It specifies the source from where the data will be fetched, depending on the value passed to the `dataFormat` attribute.
`caption`	It is used to specify the chart caption. This attribute belongs to the `chart` object.
`subCaption`	It is used to specify the chart sub-caption. This attribute belongs to the `chart` object.
`showPercentInTooltip`	It is used to specify whether percent values will be shown as a part of the tool-tip text. Setting this attribute to `0` (default) will show actual values in the tool-tip text, setting it to `1` will show percent values.
`numberPrefix`	It is used to specify the character that will precede all numeric values on the chart, e.g. `$` for the currency symbol.
`theme`	It is used to specify the theme for the chart.
`label`	It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the `category` object array, which in turn belongs to the `categories` object array.
`value`	It is used to specify the value for a data item. This attribute belongs to the `data` object array, which in turn belongs to the `dataset` object array.

There! You have now seen how you can create a simple pie/doughnut chart.