Configuring Pie and Doughnut Charts
FusionCharts Suite XT allows you to configure the functional and cosmetic properties of pie and doughnut charts.
In this section, you will be shown how you can:
Configuring the Animation Direction for a Pie/Doughnut Chart
By default, when a pie/doughnut chart is loaded for the first time or refreshed, the rendering animation is in the anti-clockwise direction. However, FusionCharts includes the animateClockwise attribute that lets you animate the chart in the clockwise direction.
A pie chat configured to animate in the clockwise direction is shown below. Click the Refresh button in the bottom-right corner of the chart to see the animation direction.
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"animateClockwise": "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": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"animateClockwise": "1",
"theme": "fint"
},
"data": [{
"label": "Food",
"value": "285040"
}, {
"label": "Apparels",
"value": "146330"
}, {
"label": "Electronics",
"value": "105070"
}, {
"label": "Household",
"value": "49100"
}]
},
"events": {
"rendered" : function(eventObj, argObject){
var chartRef = eventObj.sender;
console.log("test");
},
'beforeRender': function(eventObj, args) {
// Form controllers div
var controls = document.createElement('div'),
chartContainer = args.container;
if(!document.getElementById("controllers")) {
controls.setAttribute('id', 'controllers');
controls.innerHTML = "<input id='change' type='Button' value='Refresh'/>";
chartContainer.parentNode.insertBefore(controls, chartContainer.nextSibling);
var btnResize = document.getElementById('change');
btnResize.addEventListener("click", function() {
var chartRef = eventObj.sender;
chartRef.render();
});
}
}
}
}
);
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 animateClockwise attribute:
| Attribute Name | Description |
|---|---|
|
Sets the animation direction for a pie/doughnut charts. Set this attribute to 1 to animate the chart in the clockwise direction, set it to 0 (default) to animate in the anti-clockwise direction. |
Showing Percent Values on the Chart and Actual Values in Tooltips
By default, for a pie chart, the actual data values are shown on the chart as well as in the tool-tips. However, you can choose to show percent values on the chart while retaining the actual values in tool-tips.
A pie chart configured to show percent values on the chart looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"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": "$",
"showPercentValues": "1",
"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>Given below is a brief description of the attributes used to show percent values:
| Attribute | Description |
|---|---|
|
It is used to specify whether percentage values will be rendered as data labels on the chart. Setting this attribute to |
|
It is used to specify whether percent values will be shown as a part of the tool-tip text. Setting this attribute to |
The showPercentValues and the showPercentInTooltip attributes are applicable if you want to show percent values on the chart and actual values in tool-tips for a doughnut chart.
Customizing the Center Label for a Doughnut Chart
For a doughnut chart, you can configure the default text that will be rendered on the center label. You can also configure the text that will be rendered on the center label when the mouse pointer is hovered over one of the doughnut slices.
A doughnut chart with the center label customized looks like this:
{
"chart": {
"caption": "Split of Revenue by Product Categories",
"subCaption": "Los Angeles Topanga - Last month",
"numberPrefix": "$",
"startingAngle": "310",
"decimals": "0",
"defaultCenterLabel": "Total revenue: $60K",
"centerLabel": "Revenue from $label: $value",
"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: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Revenue by Product Categories",
"subCaption": "Los Angeles Topanga - Last month",
"numberPrefix": "$",
"startingAngle": "310",
"decimals": "0",
"defaultCenterLabel": "Total revenue: $60K",
"centerLabel": "Revenue from $label: $value",
"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>Given below is a brief description of the attributes used to customize the center label:
| Attribute | Description |
|---|---|
|
It is used to specify the default text to render for the center label of a doughnut chart. |
|
It is used to specify the text that will be rendered when the mouse pointer is hovered over a doughnut slice. |
Enabling Single-slice Slicing
By default, the pie and doughnut charts allow you to slice out multiple pie/doughnut slices at one time. You can, however, opt to enable slicing-out only one slice at a time.
A pie chart with single-slicing enabled looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"startingAngle": "20",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"enableSmartLabels": "0",
"enableMultiSlicing": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100",
"isSliced": "1"
}
]
}<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: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"startingAngle": "20",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"enableSmartLabels": "0",
"enableMultiSlicing": "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",
"isSliced": "1"
}]
}
}
);
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 attribute used to enable single-slicing:
| Attribute | Description |
|---|---|
|
It is used to specify whether single-slicing will be enabled for pie/doughnut charts. Setting this attribute to |
Disabling Smart Labels and Lines
By default, pie and doughnut charts are rendered with smart labels and lines - smart labels are data labels connected to their corresponding pie slices using line segments called smart lines. Smart labels manage overlapping of labels even when a large number of labels are placed in close vicinity. You can, however, choose to disable these smart labels.
A pie chart with smart labels disabled looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"enableSmartLabels": "0",
"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": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
//Disable Smart Labels
"enableSmartLabels": "0",
//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>Given below is a brief description of the attribute used to disable smart labels:
| Attribute | Description |
|---|---|
|
It is used to specify whether smart labels will be rendered for pie/doughnut charts. Setting this attribute to |
If smart labels are disabled then, in case of a large number of labels, the labels might overlap each other.
Customizing Smart Lines
A pie chart with the cosmetic properties of smart lines customized looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"startingAngle": "30",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"smartLineColor": "#d11b2d",
"smartLineThickness": "2",
"smartLineAlpha": "75",
"isSmartLineSlanted": "0",
"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": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"startingAngle": "30",
"decimals": "1",
"useDataPlotColorForLabels": "1",
//Smart line cosmetics
"smartLineColor": "#d11b2d",
"smartLineThickness": "2",
"smartLineAlpha": "75",
"isSmartLineSlanted": "0",
//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>Given below is a brief description of the attributes used to customize smart lines:
| Attribute | Description |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the smart label connector lines. |
|
It is used to specify the thickness, in pixels, of the smart lines. |
|
It is used to specify the transparency of the smart lines. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify whether the smart lines will be rendered as straight lines or slanted lines. Setting this attribute to |
Configuring the Label Distance and Clearance
Given below is a brief description of the attributes used to configure the label distance and clearance:
| Attribute | Description |
|---|---|
|
It is used to specify the distance, in pixels, between the label/value text boxes from the pie/doughnut edge. This attribute is applicable only when smart labeling is disabled. |
|
It is used to specify the clearance distance, in pixels, of a label (for sliced-in pies) from adjacent sliced out pies. |
Skipping Overlap Labels
When there are too many labels in the pie/doughnut chart (which is difficult to adjust even if you are using smart labels), the labels may overlap. In this case, you have the option to skip the overlapping labels. The labels of the least significant pies will be removed.
Given below is a brief description of the attribute used to skip overlap labels:
| Attribute | Description |
|---|---|
|
It is used to specify whether overlapping labels will be skipped. Setting this attribute to |
Customizing Pie Radius
By default, for pie/doughnut charts, the chart automatically calculates the best fit pie radius based on the data provided. However, you can choose to explicitly set the outer radius of the pie chart.
A pie chart with the outer radius customized looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"pieRadius": "75",
"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: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
//Radius
"pieRadius": "75",
//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>Given below is a brief description of the attribute used to customize the outer radius:
| Attribute | Description |
|---|---|
|
It is used to specify the outer radius of the pie/doughnut chart. |
Setting the Starting Angle
By default, pie/doughnut charts start plotting from the 0° angle. The chart allows you to explicitly set the starting angle.
A pie chart with the starting angle set to 45° looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"startingAngle": "45",
"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": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
//Starting Angle
"startingAngle": "45",
//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>Given below is a brief description of the attribute used to set the starting angle:
| Attribute | Description |
|---|---|
|
It is used to specify the starting angle for the pie/doughnut chart. The first pie slice will start plotting from the angle measure specified in this attribute. |
Slicing a Pie/Doughnut
When a pie/doughnut chart first renders, by default, all slices are sliced-in. However, to highlight a slice, you may want to render it sliced-out when the chart first loads.
A pie chart rendered with one slice sliced-out looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"startingAngle": "20",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"showLegend": "1",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100",
"isSliced": "1"
}
]
}<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": "$",
"startingAngle": "20",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"showLegend": "1",
"decimals": "1",
"useDataPlotColorForLabels": "1",
//Theme
"theme": "fint"
},
"data": [{
"label": "Food",
"value": "285040"
}, {
"label": "Apparels",
"value": "146330"
}, {
"label": "Electronics",
"value": "105070"
}, {
"label": "Household",
"value": "49100",
//Slicing out the pie as an individual item
"isSliced": "1"
}]
}
}
);
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 attribute used to slice out a pie slice when the chart is first rendered:
| Attribute | Description |
|---|---|
|
It is used to specify whether the pie chart will be rendered with one slice sliced-out. Setting this attribute to |
Configuring the Slicing Distance
When a pie/doughnut slice is sliced-out, you can configure the distance between the center and the sliced-out slices.
A chart with the slicing distance configured looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"slicingDistance ": "10",
"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": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
//Configuring slicing distance
"slicingDistance ": "10",
//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>Given below is a brief description of the attribute used to configure the slicing distance:
| Attribute | Description |
|---|---|
|
It is used to specify the distance, in pixels, between the center of the chart and the sliced-out slices. |
Configuring the Bevel Effect
For pie/doughnut charts, you can configure the bevel effect to render the chart with 3D effects.
A pie chart configured for the bevel effect looks like this:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"enableSmartLabels": "1",
"use3DLighting": "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": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"enableSmartLabels": "1",
"use3DLighting": "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>Given below is a brief description of the attributes used to configure the bevel effect:
| Attribute | Description |
|---|---|
|
It is used to specify whether advanced gradients and shadow effects will be used to create better looking charts. Setting this attribute to |
|
It is used to specify the 3D radius of the chart, in percentage, when the chart is rendered in the 3D lighting mode. It basically helps to set the bevel distance for the pie/doughnut. |
For all the samples shown above, if you want so see how each attribute works for the doughnut chart, just change the value of the type attribute from pie2D/pie3D to doughnut2D/doughnut3D.