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

By | August 21, 2013

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

  1. Kennethhoink

    Your comment is awaiting moderation.

    Kudos. I like this!
    http://viagrapego.com/
    lifestyles viagra viagra generic natural viagra pharmacy online viagra without a doctor prescription
    viagra geniric
    viagra drug test
    viagra soft tabs
    viagra mail order
    <a href="http://www.bryandornan.com/index.php/2010/02/search-engine-optimization-overview/#comments?form2mailerror&inquiry=Business+Development&fname=Howarditala&lname=Howarditala&email=zittel020eejf%40songwriter.net&company=google&phone1=81165293468&phone2=89353854855&phone3=89539955831&comments=+Cheers%21+A+lot+of+data%21++https://nicktambone.com/+mexican+pharmacies+%3Ca+href=%22http://canadianonlinepharmacynnm.com/%22%3Ecanadian+pharmacies-24h%3C/a%3E+cialis+canadian+pharmacy+%3Ca+href=http://canadianpharmaciescubarx.com/%3Ecanada+pharmaceuticals+online%3C/a%3E?form2mailerror&inquiry=Business Development&fname=Brendanlib&lname=Brendanlib&email=stolzenberg334ziz@dutchmail.com&company=google&phone1=86891733399&phone2=88423532441&phone3=83252487268&comments=You actually mentioned this very well! http://viagrawithoutadoctorsntx.com/ viagra 100 pic generic viagra 100mg continuing medil edution lifornia viagra viagra without a doctors prescription“>can you have too much viagra
    viagra marketing plan

    Reply
  2. Kennethhoink

    Your comment is awaiting moderation.

    Wow many of useful material!
    http://viagrawithoutadoctorsntx.com/
    is half a viagra effective buy viagra is all viagra the same viagra without a doctors prescription
    perscription viagra columbus ohio
    actress viagra commercial
    using viagra on females
    australian viagra online
    viagra worldcanada
    <a href="http://mirabiliatour.blogspot.com/ask?q=+Thanks.+A+lot+of+content.++http%3A%2F%2Fviagrawithoutadoctormsn.com%2F+can+you+take+viagra+and+levitra+buy+viagra+%0D%0Ado+las+vegas+hookers+sell+viagra+%0D%0A%5Burl%3Dhttp%3A%2F%2Fviagrawithoutadoctorsntx.com%2F%5Dviagra+without+a+doctor+prescription%5B%2Furl%5D&submit=ask”>edinburgh uk viagra search find posted

    Reply

Leave a Reply

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