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

By | August 21, 2013
0 Comment

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:

ASP.NET Column Chart

0 thoughts on “How to change type of chart of a Chart control in ASP.NET 4.0 programmatically”

  14. Howardrah

    Your comment is awaiting moderation.

    Regards, Great information!
    http://canadianonlinepharmacynnm.com/
    drug price northwestpharmacy best non prescription online pharmacies canadian pharmacies-24h
    <a href="http://www.ikeaclub.biz.ua/lib/ajax/contact_us_form.php?form_ajax=contacts&name=Howardscork&email=zittel020eejf%40songwriter.net&phone=83813525251&message=+Perfectly+spoken+certainly.+%21+http%3A%2F%2Fcanadianpharmacysilo.com%2F+canadian+pharcharmy+online+canadian+pharmacy+online+pharmacy+online+global+pharmacy+canada+%0D%0Awalmart+pharmacy+price+check+%0D%0Acanada+pharmacy+online+%0D%0Arx+pharmacy+%0D%0Amail+order+pharmacies+%0D%0Anorthwestpharmacy+%0D%0Apharmacy+price+compare&security_code=32844274&send=”>canadian online pharmacy reviews
    best online canadian pharcharmy
    mail order pharmacy
    global pharmacy canada
    prescription drug
    canadian pharmacies that ship to us

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *