Text version of the video
Slides
All ASP .NET Chart Control Text Articles and Slides
ASP.NET Charts Playlist
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
In Part 1 of this video series, we discussed specifying chart data declaratively in HTML. In this video we will discuss creating chart data programmatically. Please watch Part 1 and Part 2 before proceeding with this video. We will continue with the example we worked with in Parts 1 and 2.
Step 1 : From the Chart1 control on WebForm1.aspx, remove [Points] element and all the [asp:DataPoint] elements. The HTML of Chart1 control should now be as shown below.
[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”]
[/asp:Series]
[/Series]
[ChartAreas]
[asp:ChartArea Name=”ChartArea1″]
[AxisX Title=”Student Name”]
[/AxisX]
[AxisY Title=”Total Marks”]
[/AxisY]
[/asp:ChartArea]
[/ChartAreas]
[/asp:Chart]
Step 2 : Modify the code in the code-behind file as shown below. The code is commented and self explanatory.
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)
{
// Call Get ChartData() method in the PageLoad event
GetChartData();
GetChartTypes();
}
}
private void GetChartData()
{
// Retrieve the Series to which we want to add DataPoints
Series series = Chart1.Series[“Series1”];
// Add X and Y values using AddXY() method
series.Points.AddXY(“Mark”, 800);
series.Points.AddXY(“Steve”, 900);
series.Points.AddXY(“John”, 700);
series.Points.AddXY(“Mary”, 900);
series.Points.AddXY(“Ben”, 600);
}
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)
{
// Call Get ChartData() method when the user select a different chart type
GetChartData();
this.Chart1.Series[“Series1”].ChartType =
(SeriesChartType)Enum.Parse(typeof(SeriesChartType), DropDownList1.SelectedValue);
}
}
}
In our next video, we will discuss how to bind database data to the chart control.
