c# .net Adsense ADO.NET Linq Viruses/security asp.net MVC JQuery Angular-js Node-js SEO Java C++ SQL API Networking vb.net .Net Css JavaScript Generics c#.Net entity framework HTML Website host Website Construction Guide HTTP tutorial W3C tutorial Web Services JSON Psychology Ionic framework Angular ReactJS Python Computer Android
.Net

How to setting ChartType property in asp.net chart control dynamically?

| | ASP-NET , chart

In this article we will discuss, how to setting ChartType property in asp.net chart control dynamically. Please refer before preceding previous tutorial part1.

Step 1: create a drowpdownlist and bind chart type name on it and set AutoPostBack to true. We can change chart type as our wish.

Step 2: Copy and paste the following code.

Flowchart.aspx:

<table style="border: 1px solid #e2e2e2; font-family: Arial">
        <tr>
            <td>
                <b>Select Chart Type:</b>
            </td>
            <td>
                <asp:DropDownList ID="ChartType" AutoPostBack="true" runat="server"
                   OnSelectedIndexChanged="ChartType_SelectedIndexChanged">
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Chart ID="Chart1" runat="server" Width="450px">
                   <Titles>
                       <asp:Title Text="website visitors">
                       </asp:Title>
                   </Titles>
                   <Series>
                       <asp:Series Name="Series1" ChartArea="ChartArea1" ChartType="point">
                            <Points>
                                <asp:DataPoint AxisLabel="sun" YValues="800" />
                                <asp:DataPoint AxisLabel="mon" YValues="900" />
                                <asp:DataPoint AxisLabel="tue" YValues="700" />
                                <asp:DataPoint AxisLabel="wed" YValues="900" />
                                <asp:DataPoint AxisLabel="thr" YValues="600" />
                                <asp:DataPoint AxisLabel="fri" YValues="750" />
                                <asp:DataPoint AxisLabel="sat" YValues="950" />
                            </Points>
                       </asp:Series>
                   </Series>
                   <ChartAreas>
                       <asp:ChartArea Name="ChartArea1">
                            <AxisX Title="week">
                            </AxisX>
                            <AxisY Title="visitors per day">
                            </AxisY>
                       </asp:ChartArea>
                   </ChartAreas>
                </asp:Chart>
            </td>
        </tr>
    </table>

Flowchart.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.DataVisualization.Charting;
using System.Web.UI.WebControls; 

public partial class _Flowchart : 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());
               ChartType.Items.Add(li);
            }
        }

        protected void ChartType_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.Chart1.Series["Series1"].ChartType = (SeriesChartType)Enum.Parse(
                typeof(SeriesChartType), ChartType.SelectedValue);
        }
    }

Output: