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:
The data structure needed to create a simple pie 2D chart is given below:
To render a pie chart in 3D, change the value of the typeattribute frompie2Dtopie3D`. 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:
The data structure needed to create a simple doughnut 2D chart is given below:
To render a doughnut chart in 3D, change the value of the typeattribute fromdoughnut2Dtodoughnut3D`. 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.