Appending Percentage and NameField to Pie Chart Items in RadHtmlChart for ASP.NET AJAX

Description

When working with the RadHtmlChart for ASP.NET AJAX, you might want to dynamically append percentage values and name fields to each item in a Pie Chart directly from the codebehind using C#. This knowledge base article also answers the following questions:

• How to use ClientTemplate in RadHtmlChart PieSeries with C#?
• How to dynamically set colors for Pie Chart items in RadHtmlChart?
• How to bind data to RadHtmlChart PieSeries using codebehind in ASP.NET AJAX?

Environment

Product

RadHtmlChart for ASP.NET AJAX

Solution

To append percentage values and name fields to each item in a RadHtmlChart Pie Chart, and optionally set item colors dynamically from the codebehind, you can follow these steps:

Approach 1: Use a Dictionary for Color Mapping

This approach allows you to map DAYPART values to their corresponding colors without modifying the database. A calculated COLOR column is added dynamically to the DataTable, which is then used to set the slice colors.

ASPX.CS:

ASPX

        <telerik:RadHtmlChart runat="server" ID="DayPartsPieChart" Height="400px" Width="500px"
            Legend-Appearance-Position="Right"
            BorderColor="Black" BorderStyle="Solid" BorderWidth="2px"
            Transitions="true">
            <Appearance FillStyle-BackgroundColor="White"></Appearance>
            <PlotArea>
                <Series>
                    <telerik:PieSeries>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
            <Legend>
                <Appearance Visible="false" />
            </Legend>
        </telerik:RadHtmlChart>

csharp

    protected void Page_Init(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadDayPartsPieChart();
        }
    }

    public void LoadDayPartsPieChart()
    {
        // Define and populate the data source
        DataTable table = new DataTable();
        table.Columns.Add("DAYPART", typeof(string));
        table.Columns.Add("PCT", typeof(decimal));

        table.Rows.Add("EM", 18.5m);
        table.Rows.Add("DT", 18.6m);
        table.Rows.Add("PT", 3.0m);
        table.Rows.Add("LN", 37.1m);
        table.Rows.Add("LE", 11.4m);
        table.Rows.Add("EF", 11.4m);

        // Define a dictionary for DAYPART-to-color mapping
        Dictionary<string, string> colorMapping = new Dictionary<string, string>
    {
        { "EM", "Purple" },
        { "DT", "Orange" },
        { "PT", "Green" },
        { "LN", "Blue" },
        { "LE", "Red" },
        { "EF", "Yellow" }
    };

        // Add a calculated COLOR column dynamically
        table.Columns.Add("COLOR", typeof(string));
        foreach (DataRow row in table.Rows)
        {
            string dayPart = row["DAYPART"].ToString();
            if (colorMapping.ContainsKey(dayPart))
            {
                row["COLOR"] = colorMapping[dayPart];
            }
        }

        // Clear existing series
        DayPartsPieChart.PlotArea.Series.Clear();

        // Create a new PieSeries
        Telerik.Web.UI.PieSeries pieSeries = new Telerik.Web.UI.PieSeries
        {
            DataFieldY = "PCT",        // Bind PCT values to the pie slices
            NameField = "DAYPART",     // Bind DAYPART names to labels
            ColorField = "COLOR",      // Bind dynamically calculated COLOR field
            LabelsAppearance =
        {
            Position = Telerik.Web.UI.HtmlChart.PieAndDonutLabelsPosition.OutsideEnd,
            Visible = true,
            ClientTemplate = "#= dataItem.PCT # % \\n #= dataItem.DAYPART #"
        },
            TooltipsAppearance =
        {
            ClientTemplate = "#= dataItem.PCT # : \\n #= dataItem.DAYPART #"
        },
            VisibleInLegend = false
        };

        // Add the PieSeries to the chart
        DayPartsPieChart.PlotArea.Series.Add(pieSeries);

        // Bind the chart to the data source
        DayPartsPieChart.DataSource = table;
        DayPartsPieChart.DataBind();

        // Optionally update the chart title
        DayPartsPieChart.ChartTitle.Text = "Airings by Daypart";
    }

Approach 2: Use the ColorField Property

If your data source already includes a COLOR column, you can directly bind it to the ColorField property of the PieSeries to dynamically set the item colors.

ASPX.CS:

csharp

// Similar to Approach 1, but ensure your DataTable includes a COLOR column
    protected void Page_Init(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadDayPartsPieChart();
        }
    }

    public void LoadDayPartsPieChart()
    {
        // Define and populate the data source
        DataTable table = new DataTable();
        table.Columns.Add("DAYPART", typeof(string));
        table.Columns.Add("PCT", typeof(decimal));
        table.Columns.Add("COLOR", typeof(string)); // Add a COLOR column to the data source

        table.Rows.Add("EM", 18.5m, "Purple");
        table.Rows.Add("DT", 18.6m, "Orange");
        table.Rows.Add("PT", 3.0m, "Green");
        table.Rows.Add("LN", 37.1m, "Blue");
        table.Rows.Add("LE", 11.4m, "Red");
        table.Rows.Add("EF", 11.4m, "Yellow");

        // Clear existing series
        DayPartsPieChart.PlotArea.Series.Clear();

        // Create a new PieSeries
        Telerik.Web.UI.PieSeries pieSeries = new Telerik.Web.UI.PieSeries
        {
            DataFieldY = "PCT",        // Bind PCT values to the pie slices
            NameField = "DAYPART",     // Bind DAYPART names to labels
            ColorField = "COLOR",      // Bind COLOR column to dynamically set colors
            LabelsAppearance =
        {
            Position = Telerik.Web.UI.HtmlChart.PieAndDonutLabelsPosition.OutsideEnd,
            Visible = true,
            ClientTemplate = "#= dataItem.PCT # % \\n #= dataItem.DAYPART #"
        },
            TooltipsAppearance =
        {
            ClientTemplate = "#= dataItem.PCT # : \\n #= dataItem.DAYPART #"
        },
            VisibleInLegend = false
        };

        // Add the PieSeries to the chart
        DayPartsPieChart.PlotArea.Series.Add(pieSeries);

        // Bind the chart to the data source
        DayPartsPieChart.DataSource = table;
        DayPartsPieChart.DataBind();

        // Optionally update the chart title
        DayPartsPieChart.ChartTitle.Text = "Airings by Daypart";
    }

Both approaches allow for dynamically appending percentage values and name fields to each Pie Chart item and setting their colors from the codebehind.

See Also

• RadHtmlChart Overview
• PieSeries - Telerik UI for ASP.NET AJAX
• RadHtmlChart ClientTemplate