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: