Pie chart: any build-in feature besides using AngleField for the description and the figure shown in the chart

[josephmkchan]

Hello,

I have already created the Pie Chart using the SQLDatabaseSource as datasource, however, I am not familiar with the Piechart or other charts that can add other fields on the chart, Just like the screenshot below, I have use AngleField to display the department name already, but

1) I want to use if any build-in field or custom method to display the figures or/and the % on the chart, no need to use Tooltip to mouseover on the region of the Pie Chart.

2) Also, if the AngleField (department name) too long, how to configure to break into two lines and align center or even point outside of the Pie Chart if the potion is too small.

I tried to merge two data fields (department name and figure) as one on the SQLDataSource, however, I don't want to show the figures on the legend, only need to show the department name.

3) More, if i have the sum of total figures on SQL Datasource, but how to display on the center of the piechart (donut)? Or if you can suggest use the client javascript to sum up the total figures but just want to display the total sum on the Pie Chart center.


I have checked on the examples but still not many examples to illustrate the attributes or detail references.

Thanks for answering my question.

[fabricio.murta]

Hello @josephmkchan!

For (1) unfortunately I don't see any built-in mechanism to grant you this behavior. But I don't really see what you want and what you're calling "figures" and "%" there. For the custom method approach, see below.

This applies for your topics (1) and (2). You can use a renderer to add any custom text to the printed label (1), or insert a line break character sequence if the string exceeds a threshold of your choice (2).

The solution for (2), for instance, parting from this example: - Charts Pie Chart > Renderer

The following renderer can be used to break the line of the label in case it has more than 5 characters:"

var labelRenderer = function (value, sprite, spriteConfig, store, idx) {
    var result = "";
    if (value.length > 5) {
        result = value.substring(0, 5) + "\n" + value.substring(5);
    } else {
        result = value;
    }
    return result;
}

To trigger this renderer, down in the sample's source, ext:Panel > Items > ext:PolarChart > Series > ext:PieSeries > Label, the Label line can be changed into this block:

<Label Field="Name" Display="Rotate" Font="14px Arial">
    <Renderer Fn="labelRenderer" />
</Label>

Then the January and February months will be broken like this:

Janua
ry

Febru
ary

For (3), you can use a custom sprite to place custom values anywhere in the chart, including in its center. It would require a bit of thinkering, though. There are many charts using this feature to print data source and other static information, you can just base on one of them. Just to cite an example, it is the Chart > Misc > Captions.

Unfortunately we don't have an example for every one possible combination of settings of the pie component, as there are so many possibilities. But I hope with the information here and the several examples around the ones linked above you'd be able to at least come to a test case close to what you need so we can follow up with specifics.

Hope this helps!