ASP.NET Chart Control Tutorial

Creating asp net chart data programmatically

Text version of the video
http://csharp-video-tutorials.blogspot.com/2014/10/creating-aspnet-chart-data.html

Slides
http://csharp-video-tutorials.blogspot.com/2014/10/creating-aspnet-chart-data_16.html

All ASP .NET Chart Control Text Articles and Slides
http://csharp-video-tutorials.blogspot.com/2014/10/aspnet-chart-control-tutorial.html

ASP.NET Charts Playlist

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

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.