How to set asp.net chart control ChartType property dynamically

Suggested Videos
Part 1 - ASP.NET Chart Control



In this video, we will discuss setting ChartType property of asp.net chart control dynamically. This is continuation to Part 1. Please watch Part 1, before proceeding.



There are 2 ways to set the ChartType property

1. Declaratively in the HTML using ChartType attribute.

<asp:Series Name="Series1" ChartArea="ChartArea1" ChartType="Pie">

    <Points>

        <asp:DataPoint AxisLabel="Mark" YValues="800" />

        <asp:DataPoint AxisLabel="Steve" YValues="900" />

        <asp:DataPoint AxisLabel="John" YValues="700" />

        <asp:DataPoint AxisLabel="Mary" YValues="900" />

        <asp:DataPoint AxisLabel="Ben" YValues="600" />

    </Points>

</asp:Series>

2. Programatically in code. We want to display all the different ChartTypes available in a DropDownList. When the user selects an option from the DropDownList we want to set the selected chart type as the value for the ChartType property dynamically in code.



Modify the HTML on WebForm1.aspx as shown below. Notice that we have included a DropDownList to display the different ChartTypes that are available. We have also set the AutoPostBack property of the DropDownList to True.

<table style="border: 1px solid black; font-family: Arial">

<tr>

    <td>

        <b>Select Chart Type:</b>

    </td>

    <td>

        <asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server"

            OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

        </asp:DropDownList>

    </td>

</tr>

<tr>

    <td colspan="2">

        <asp:Chart ID="Chart1" runat="server" Width="350px">

            <Titles>

                <asp:Title Text="Total marks of students">

                </asp:Title>

            </Titles>

            <Series>

                <asp:Series Name="Series1" ChartArea="ChartArea1" ChartType="Pie">

                    <Points>

                        <asp:DataPoint AxisLabel="Mark" YValues="800" />

                        <asp:DataPoint AxisLabel="Steve" YValues="900" />

                        <asp:DataPoint AxisLabel="John" YValues="700" />

                        <asp:DataPoint AxisLabel="Mary" YValues="900" />

                        <asp:DataPoint AxisLabel="Ben" YValues="600" />

                    </Points>

                </asp:Series>

            </Series>

            <ChartAreas>

                <asp:ChartArea Name="ChartArea1">

                    <AxisX Title="Student Name">

                    </AxisX>

                    <AxisY Title="Total Marks">

                    </AxisY>

                </asp:ChartArea>

            </ChartAreas>

        </asp:Chart>

    </td>

</tr>

</table>

WebForm1.aspx.cs code

using System;

using System.Web.UI.DataVisualization.Charting;

using System.Web.UI.WebControls;

namespace ChartsDemo

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                GetChartTypes();

            }

        }

        private void GetChartTypes()

        {

            foreach (int chartType in Enum.GetValues(typeof(SeriesChartType)))

            {

                ListItem li = new ListItem(Enum.GetName(typeof(SeriesChartType),

                    chartType), chartType.ToString());

                DropDownList1.Items.Add(li);

            }

        }

        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

        {

            this.Chart1.Series["Series1"].ChartType = (SeriesChartType)Enum.Parse(

                typeof(SeriesChartType), DropDownList1.SelectedValue);

        }

    }

}