How to change type of chart of a Chart control in ASP.NET 4.0 programmatically

Introduction
In this article I will explain how to change CharType of a Chart control in ASP.NET 4.0 dynamically at runtime

Description
Type of a Chart control can be changed by changing the ChartType property of the Series component inside the Series collection. ChartType property is set to SeriesChartType enum.

Example:

chartProducts.Series["ProductSeries"].ChartType = SeriesChartType.Pie;

Here first we will load all the possible type of charts in a DropDownList from the SeriesChartType enum. Then we will change type of chart according to the selected chart from the DropDownList.

Step 1: Create a new ASP.NET Application

Step 2: Add a DropDownList, and Chart control with some data in the Default.aspx HTML source as following

<div style="width: 100%;">
    <div class="auto">
        <asp:Label ID="lblChartType" runat="server" Text="Select Chart type"></asp:Label>
        <asp:DropDownList ID="ddlChartType" runat="server" OnSelectedIndexChanged="ddlChartType_SelectedIndexChanged" AutoPostBack="true"> </asp:DropDownList>
    </div>
</div>
<div style="width: 100%; border-bottom: 1px solid #CCCCCC; padding-bottom: 10px;"> </div>
<div style="width: 100%;">
    <asp:Chart ID="chartProducts" runat="server" Width="800" Height="500" CssClass="auto">
        <Series>
            <asp:Series ChartArea="ProductChartArea" Name="ProductSeries">
                <Points>
                    <asp:DataPoint AxisLabel="Rhönbräu Klosterbier" YValues="360" />
                    <asp:DataPoint AxisLabel="Boston Crab Meat" YValues="220" />
                    <asp:DataPoint AxisLabel="Boysenberry Spread" YValues="240" />
                    <asp:DataPoint AxisLabel="Pâté chinois" YValues="350" />
                    <asp:DataPoint AxisLabel="Röd Kaviar" YValues="150" /> </Points>
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ProductChartArea"> </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>
</div>

Step 3: In the code behind file (Default.aspx.cs) import the Charting namespace

using System.Web.UI.DataVisualization.Charting;

Step 4: Add following code in the code behind file

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		// Loads all the available charts in a DropDownList
		string[] chartType = 	Enum.GetNames(typeof(SeriesChartType));
		ddlChartType.DataSource = chartType;
		ddlChartType.DataBind();

		// Sets selected value to the default chart type
		ddlChartType.SelectedValue = "Column";
	}
}

protected void ddlChartType_SelectedIndexChanged(object sender, EventArgs e)
{
	chartProducts.Series["ProductSeries"].ChartType =
(SeriesChartType)Enum.Parse(typeof(SeriesChartType), ddlChartType.Text);
}

In the page load event we loaded all the chart types from the SeriesChartType enumeration in the DropDownList “ddlChartType” using Enum.GetNames() method. And in the SelectedIndexChanged event of the DropDownList we set ChartType of the Chart’s Series to the selected chart from the list.

Note: Default ChartType of a Series component in a Chart control is Column chart. So, a Column chart is loaded when ChartType property of the Series component is not set.

Output: