How to customize the pie chart?

[Uttam Dhakal]

I am trying to implement few things on Pie Chart how can i do that?
1. I want to assing the full pie chart as a value like
Total = The Whole pie Chart
and Used will be a part
so Total will be 100%
and Used will be 30 then the pie should so me as
Total 100 and Used 30%
Whole value of pie should be 100
I can only add items now.

2. How do i modify the position of the pie Chart,the margins of the chart diagram, the position of the legends through server coding.

Any help will be highly appreciated Please

[Marin Bratanov]

Hello Uttam,

A Pie chart is generally 100%, as explained here: http://www.telerik.com/help/aspnet-ajax/htmlchart-types-pie-chart.html.

You can add a title for the chart or a regular span/ASP label around the chart to indicate that it shows 100%

You can also create two items for it - one with the Used value you have and another with value equal to 100-Used, so that they show up in the legend as desired. This will allow you to set their colors and names as well. For example

<telerik:RadHtmlChart runat="server" ID="rhc1" Width="400" Height="400">
    <ChartTitle Text="Total: 100%">
    </ChartTitle>
    <PlotArea>
        <Series>
            <telerik:PieSeries>
                <LabelsAppearance DataFormatString="{0}%">
                </LabelsAppearance>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

protected void Page_Load(object sender, EventArgs e)
{
    int used = 33;
    int remaining = 100 - used;
    SeriesItem itemUsed = new SeriesItem();
    itemUsed.YValue=used;
    itemUsed.Name="Used";
    itemUsed.BackgroundColor = System.Drawing.Color.Green;
    SeriesItem itemRemaining = new SeriesItem();
    itemRemaining.YValue = remaining;
    itemRemaining.Name = "Remaining";
    itemRemaining.BackgroundColor = System.Drawing.Color.Red;
    rhc1.PlotArea.Series[0].Items.Add(itemUsed);
    rhc1.PlotArea.Series[0].Items.Add(itemRemaining);
}

which results in the attached image.


On paddings - you can wrap the chart in another div and set its properties as desired to offset the chart from the adjacent elements.

Regards,
Marin Bratanov
the Telerik team

[Uttam Dhakal]

the problem is i cannot display remaining

i can display only 100 and used as a part of 100.
so the full pie will be 100% the used will be the 30% of that
100%. so that users can see how much remaining automatically.
i cannot add a two items like  this.

[Uttam Dhakal]

Hi Marin thanks for your advice,
Please take a look at the picture which will describe what i want to achieve.
Here i have to items
1. Allotted Disk Space
2. Used Disk Space
I need to show the graph in a way that Whole Graph is Allotted Disk Space and Used Disk Space should be a part of the Allotted Disk Space.Not a different Item

Please Any Suggestions for that

[Marin Bratanov]

Hi Uttam,

Once again, the pie chart is itself the whole object that is displayed. This means that the entire chart is the alloted space, so you cannot add the alloted space as an item. You can have items for parts of the entire space - e.g. free, reserved, used, etc. You can show the alloted space in the chart title or in a separate label on the page. This is how pie charts work - each item is a part of the whole thing, you cannot have an item that represents the entire object you wish to visualize inside the said object.

Regarding the labels - they are automatically positioned to be as far apart as possible, because with more items they will easily overlap. This behavior cannot be changed.

All the best,
Marin Bratanov
the Telerik team