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:
{
"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"
}
]
}<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: 'pie2d',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
//Theme
"theme": "fint"
},
"data": [{
"label": "Food",
"value": "285040"
}, {
"label": "Apparels",
"value": "146330"
}, {
"label": "Electronics",
"value": "105070"
}, {
"label": "Household",
"value": "49100"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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:
{
"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"
}
]
}<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: 'doughnut2d',
renderAt: 'chart-container',
width: '450',
height: '450',
dataFormat: 'json',
dataSource: {
"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"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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:
Given below is a brief description of the data structure used to create the above pie and doughnut charts:
| Attribute Name | Description |
|---|---|
|
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 |
|
It is used to specify the container object where the chart will be rendered. |
|
It is used to specify the width of the chart. |
|
It is used to specify the height of the chart. |
|
It is used to specify the type of data that will passed to the chart object. This attribute takes two values: |
|
It specifies the source from where the data will be fetched, depending on the value passed to the |
|
It is used to specify the chart caption. This attribute belongs to the |
|
It is used to specify the chart sub-caption. This attribute belongs to the |
|
It is used to specify whether percent values will be shown as a part of the tool-tip text. Setting this attribute to |
|
It is used to specify the character that will precede all numeric values on the chart, e.g. |
|
It is used to specify the theme for the chart. |
|
It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the |
|
It is used to specify the value for a data item. This attribute belongs to the |