ALIAS: doughnut2d

Example of Doughnut 2D Chart:

JavaScript embedding code:

<script type="text/javascript">
FusionCharts.ready(function() {
    var myChart = new FusionCharts({
        "type": "doughnut2d",
        "dataFormat": "jsonurl",
        "dataSource": "chartdata.json"
    });
});
</script>

Data for this chart:

• JSON
• XML

Chart Attributes

Functional Attributes

You can control a variety of functional elements on the chart. For example, you can opt to show/hide data labels, data values, y-axis values. You can also set chart limits and extended properties.

These attributes let you control the functional properties of a doughnut 2D chart.

Chart Titles

These attributes let you control the various headings and titles of chart like caption, sub-caption, x-axis and y-axis names etc.

Chart Caption Cosmetics

These attributes let you configure the cosmetics of chart caption and sub-caption.

Chart Cosmetics

These attributes let you configure chart cosmetics like background color, background alpha, canvas color & alpha etc.

Data Plot Cosmetics

Various other controls over plot cosmetics can be attained using this set of attributes. If the plots can show borders, you can control the border properties using the attributes listed below. Or, if they support gradient fills, you can again configure various properties of the gradient using these attributes.

These attributes let you configure how your plot (columns, lines, area, pie or any data that you're plotting) will appear on the chart.

Data Label & Value Cosmetics

These attributes let you configure font, font color, background and border cosmetics of data labels and data values.

Pie / Doughnut Properties

These attributes let you configure the functional properties of pie/doughnut chart.

Smart Labels & Lines

In FusionCharts XT, the pie and doughnut charts can now have smart labels and lines.

Smart labels/lines are data connector lines which connect the pie/doughnut slices to their respective labels without over-lapping even in cases where there are lots of labels located near each other.

These attributes let you configure smart labels and lines for pie/doughnut chart.

Number Formatting Properties

FusionCharts XT offers you a lot of options to format your numbers on the chart.

Using the attributes below, you can control a myriad of options like:

• Formatting of commas and decimals
• Number prefixes and suffixes
• Decimal places to which the numbers will round to
• Scaling of numbers based on a user defined scale
• Custom number input formats

These attributes let you appropriately format the numbers displayed on the chart.

Font Properties

These attributes let you define the generic font properties for all the text on the chart, allowing you a high level control over font properties.

Legend Properties

In pie/doughnut chart, the series name of each data-set shows up in the legend of the chart. If you do not need the legend, you can opt to hide the same.

Also, the legend can be placed at the bottom of the chart or to the right of the chart.

These attributes let you configure the functional and cosmetic properties for the legend.

Tool-tip Properties

These attributes let you configure tool-tip properties.

Data Plot Hover Effects

You can show an effect on the data plot (column, line anchor, pie etc.) when the user hovers his mouse over the data plot using hover effects of data plots.

These attributes let you configure the cosmetics of the hover for all data plots in the chart.

Chart Paddings & Margins

FusionCharts XT allows you to manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. Padding in FusionCharts XT is always defined in pixels, unless the attribute itself suggests some other scale (like plotSpacePercent).

You can also define the chart margins. Chart margins refer to the empty space left on the top, bottom, left, and right of the chart. That means, FusionCharts XT will not plot anything in that space.

It is not necessary for you to specify any padding/margin values. FusionCharts XT automatically assumes the best values for the same.

These attributes let you configure the functional and cosmetic properties of chart paddings and margins.

<set> element

Each <set> element (child of <set> element) represents a set of data which is to be plotted on the graph and determines a set of data which will appear on the chart.

For a doughnut chart, a typical <set> element will look like:

<dataset seriesName='2006'>
    <set value='35445' />
    <set value='35675' />
    .... and so on ....
</dataset>

These attributes let you configure the <set> element.