How to Setup RadChart for This

[Brian Mains]

Hello,

This is the data I want to enter into the RadChart:

Name     Key   Value
Toyota    1    15400.00
Honda     2    13786.00
Nissan     3    34455.00
Hyundai   4    23219.00

I want the pie chart to be setup the value field as the pie chart data and the name as the legend, with the color of the pie slice next to the legend name.  What is the typical chart setup for this?  I couldn't figure that out from your demo site since I didn't see many pie charts.

Thanks.

[Giuseppe]

Hello Brian,

You can achieve the desired effect like this (note that the control does not provide automatic support for databinding the Brand data field to the legend item labels and that is why we are handling the ItemDataBound event):

ASPX:

<telerik:RadChart ID="RadChart1" runat="server">
    <Series>
        <telerik:ChartSeries DataYColumn="Value" Type="Pie">
            <Appearance LegendDisplayMode="ItemLabels" />
        </telerik:ChartSeries>
    </Series>
</telerik:RadChart>

C#:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<ChartData> data = new List<ChartData>();
        data.Add(new ChartData("Toyota", 100));
        data.Add(new ChartData("Honda", 40));
        data.Add(new ChartData("Nissan", 100));
        data.Add(new ChartData("Hyundai", 70));

        RadChart1.ItemDataBound += new EventHandler<ChartItemDataBoundEventArgs>(RadChart1_ItemDataBound);
        RadChart1.DataSource = data;
        RadChart1.DataBind();
    }

    private void RadChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
    {
        e.SeriesItem.Name = ((System.Data.DataRowView)(e.DataItem))["Brand"].ToString();
    }
}

public class ChartData
{
    private string brand;
    private double value;

    public ChartData(string brand, double value)
    {
        this.brand = brand;
        this.value = value;
    }

    public string Brand
    {
        get
        {
            return this.brand;
        }
        set
        {
            this.brand = value;
        }
    }

    public double Value
    {
        get
        {
            return this.value;
        }
        set
        {
            this.value = value;
        }
    }
}

Hope this helps.

Sincerely yours,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Brian Mains]

Hello,

I'm doing something similarly; I'm creating the chart series item like:

new

ChartSeriesItem

 

{

XValue = xValue.Value,

YValue = yValue.Value,

Name = yValue.GetValue()

};

And manually adding it ot the chart series... but the series indicators do not use the color of the pie slice, so how does the user know what legend item corresponds to what pie slice?

Thanks.

[Giuseppe]

Hi Brian Mains,

If you have set the ChartSeries.Appearance.LegendDisplayMode property to ChartSeriesLegendDisplayMode.ItemLabels, you should be able to see legend items corresponding to each pie slice like this:

ChartSeries series = new ChartSeries();
series.Type = ChartSeriesType.Pie;
series.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.ItemLabels;

ChartSeriesItem seriesItem = new ChartSeriesItem(100);
seriesItem.Name = "Toyota";
series.AddItem(seriesItem);

ChartSeriesItem seriesItem2 = new ChartSeriesItem(40);
seriesItem2.Name = "Honda";
series.AddItem(seriesItem2);

ChartSeriesItem seriesItem3 = new ChartSeriesItem(100);
seriesItem3.Name = "Nissan";
series.AddItem(seriesItem3);

ChartSeriesItem seriesItem4 = new ChartSeriesItem(70);
seriesItem4.Name = "Hyundai";
series.AddItem(seriesItem4);

RadChart1.Series.Add(series);

Hope this helps.


Sincerely yours,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.