If you are a foodie like me, I am sure you will enjoy the recipes on my friend’s YouTube channel. If you find them useful, please subscribe and share to support her. She’s really good at what she does.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA

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

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

ASP.NET Charts Tutorial Playlist
https://www.youtube.com/playlist?list=PL6n9fhu94yhXmzt5lcI1_BQNHdqQbkdLi

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

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 this video we will discuss displaying data using asp.net chart control.

We want to display Student Names and their Total Marks in a barchart.

Here are the steps to achieve this

Step 1 : Drag and drop Chart control from the toolbox on to the web from

Step 2 : Modify the HTML of the Chart control as shown below
[asp:Chart ID=”Chart1″ runat=”server” Width=”350″]
[Titles]
[asp:Title Text=”Total marks of students”][/asp:Title]
[/Titles]
[Series]
[asp:Series Name=”Series1″]
[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]

Run the application and notice that the data is displayed in a barchart as expected.

Please Note :
1. To specify title for the chart use [Titles] element
2. The chart control consists of 2 main components – Series & ChartAreas. A chart can contain more than one series, and are associated with a particular Chart Area. In this example we have only one series. A series is a collection of data points.
3. To specify the X Axis title, we are using Title attribute of AxisX element and along the same line to specify the title for Y-Axis we are using Title attribute of AxisY element.
4. In this example, we are not explicitly associating the series with the ChartArea. Since we have only one series and one ChartArea, by default Series1 is associated with ChartArea1. To associate a specific series with a specific ChartArea use the ChartArea attribute of Series element as shown below.
[asp:Series Name=”Series1″ ChartArea=”ChartArea1″]

If you specify a ChartArea that does not exist, you will get a run time exception – A chart element with the name ‘ChartArea2’ could not be found in the ‘ChartAreaCollection’. In this demo we are displaying data using a Barchart. In our next video we will discuss different types of charts.