Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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.

How to set asp.net chart control ChartType property dynamically

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);
        }
    }
}

asp.net chart tutorial

2 comments:

  1. How to get data from DB to show in the chart?

    ReplyDelete
  2. sir, so nice of you to share your knowledge with people you dont know. but let me say many novice are benefited from you videos. hats off to you.

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.