Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
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 as shown below.
[Series]
[asp:Series Name=”Series1″ ChartArea=”ChartArea1″ ChartType=”Pie”]
[Points]
[asp:DataPoint AxisLabel=”Mark” YValues=”800,0,0,0,0,0″ /]
[asp:DataPoint AxisLabel=”Steve” YValues=”900,0,0,0,0,0″ /]
[asp:DataPoint AxisLabel=”John” YValues=”700,0,0,0,0,0″ /]
[asp:DataPoint AxisLabel=”Mary” YValues=”900,0,0,0,0,0″ /]
[asp:DataPoint AxisLabel=”Ben” YValues=”600,0,0,0,0,0″ /]
[/Points]
[/asp:Series]
[/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.
[div style=”font-family:Arial”]
[table style=”border: 1px solid black”]
[tr]
[td]
[b]Select Chart Type :[/b]
[/td]
[td]
[asp:DropDownList ID=”ddlChartType” runat=”server” AutoPostBack=”True”
onselectedindexchanged=”ddlChartType_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,0,0,0,0,0″ /]
[asp:DataPoint AxisLabel=”Steve” YValues=”900,0,0,0,0,0″ /]
[asp:DataPoint AxisLabel=”John” YValues=”700,0,0,0,0,0″ /]
[asp:DataPoint AxisLabel=”Mary” YValues=”900,0,0,0,0,0″ /]
[asp:DataPoint AxisLabel=”Ben” YValues=”600,0,0,0,0,0″ /]
[/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]
[/div]
WebForm1.aspx.cs code
using System;
using System.Web.UI.DataVisualization.Charting;
using System.Web.UI.WebControls;
namespace Demo
{
public partial class WebForm3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetChartTypes();
}
}
private void GetChartTypes()
{
string[] chartTypeNames = Enum.GetNames(typeof(SeriesChartType));
foreach (int chartType in Enum.GetValues(typeof(SeriesChartType)))
{
ListItem li = new ListItem(Enum.GetName(typeof(SeriesChartType), chartType), chartType.ToString());
ddlChartType.Items.Add(li);
}
}
protected void ddlChartType_SelectedIndexChanged(object sender, EventArgs e)
{
this.Chart1.Series[“Series1”].ChartType = (SeriesChartType)Enum.Parse(typeof(SeriesChartType), ddlChartType.SelectedValue);
}
}
}
