How to customize the pie chart?

5 posts, 0 answers
  1. Uttam Dhakal
    Uttam Dhakal avatar
    29 posts
    Member since:
    Jan 2010

    Posted 30 Oct 2012 Link to this post

    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
  2.
  3. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5624 posts

    Posted 31 Oct 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Uttam Dhakal
    Uttam Dhakal avatar
    29 posts
    Member since:
    Jan 2010

    Posted 31 Oct 2012 Link to this post

    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.
  7. Uttam Dhakal
    Uttam Dhakal avatar
    29 posts
    Member since:
    Jan 2010

    Posted 31 Oct 2012 Link to this post

    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
  8.
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5624 posts

    Posted 01 Nov 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top