Introduction

This article explains how to create a chart in an ASP.NET application. It's very easy to create the various types of charts in ASP.NET. In total there is around 35 types of charts supported by .NET 4.0. Use the following procedure to create a chart in your application.

For this application I am using the following table and Stored Procedure.

tblStudentInfo

  1. CREATE TABLE [dbo].[tblStudentInfo](
  2. [Id] [int] IDENTITY(1,1) NOT NULL,
  3. [Name] [varchar](50) NOT NULL,
  4. [Sub1] [int] NOT NULL,
  5. [Sub2] [int] NOT NULL,
  6. [Sub3] [int] NOT NULL,
  7. [Sub4] [int] NOT NULL,
  8. CONSTRAINT [PK_tblStudentInfo] PRIMARY KEY CLUSTERED
  9. (
  10. [Id] ASC
  11. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  12. ) ON [PRIMARY]
This table contains information about student Marks.

And the Stored Procedure SpStudentInfo calculates the student's sum of their marks that I will display in the chart.
  1. USE [manishDB]
  2. GO
  3. /****** Object: StoredProcedure [dbo].[SelectAllStudent] Script Date: 11/26/2014 22:26:13 ******/
  4. SET ANSI_NULLS ON
  5. GO
  6. SET QUOTED_IDENTIFIER ON
  7. GO
  8. Create PROCEDURE [dbo].[SpStudentInfo]
  9. AS
  10. Begin
  11. select Top 10 Name,Sub1 +Sub2 +Sub3 +Sub4 "Total Marks"
  12. from tblStudentInfo
  13. End
  14. using System.Web.UI.DataVisualization.Charting;
Step 1

Open Visual Studio and create a new web application. Drag and drop a Chart from the toolbar.

*chart

Step 2

Go to the property of that control and set it as shown in the following code.
  1. <asp:Chart ID="Chart1" runat="server" Height="300px" Width="400px">
  2. <Titles>
  3. <asp:Title ShadowOffset="3" Name="Items" />
  4. </Titles>
  5. <Legends>
  6. <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />
  7. </Legends>
  8. <Series>
  9. <asp:Series Name="Default" />
  10. </Series>
  11. <ChartAreas>
  12. <asp:ChartArea Name="ChartArea1" BorderWidth="0" />
  13. </ChartAreas>
  14. </asp:Chart>
Step 3

Now create a class that will communicate with the database and call the Stored Procedure for displaying the chart.
  1. public class Configuration
  2. {
  3. internal static string connectionString = ConfigurationManager.ConnectionStrings["DbCS"].ConnectionString;
  4. }
  5. public class DbOperation
  6. {
  7. private void selectData(string StoredProcedureName, out DataTable dtemp, [Optional] string[,] aryParameters)
  8. {
  9. using (SqlConnection con = new SqlConnection(Configuration.connectionString))
  10. {
  11. using (SqlCommand cmd = new SqlCommand())
  12. {
  13. con.Open();
  14. cmd.CommandType = CommandType.StoredProcedure;
  15. SqlDataAdapter adp = new SqlDataAdapter();
  16. DataTable dt = new DataTable();
  17. cmd.CommandText = StoredProcedureName;
  18. cmd.CommandTimeout = 300;
  19. try
  20. {
  21. for (int i = 0; i < aryParameters.GetLength(0); i++)
  22. {
  23. cmd.Parameters.Add(new SqlParameter(aryParameters[i, 0], aryParameters[i, 1]));
  24. }
  25. }
  26. catch (Exception ex)
  27. {
  29. }
  30. cmd.Connection = con;
  31. adp.SelectCommand = cmd;
  32. adp.Fill(dt);
  33. con.Close();
  34. dtemp = dt;
  35. }
  36. }
  37. }
  38. public DataTable MarksDetails()
  39. {
  40. DataTable dt = new DataTable();
  41. selectData("SpStudentInfo", out dt, null);
  42. return dt;
  43. }
  44. }
Step 4

After creating the preceding class go to the design mode of the web form and create the following function.
  1. private void DisplayChart(SeriesChartType cType)
  2. {
  3. DataTable dt = new DataTable();
  4. DbOperation db = new DbOperation();
  5. dt = db.MarksDetails();
  6. string[] x = new string[dt.Rows.Count];
  7. int[] y = new int[dt.Rows.Count];
  8. for (int i = 0; i < dt.Rows.Count; i++)
  9. {
  10. x[i] = dt.Rows[i]["Name"].ToString();
  11. y[i] = Convert.ToInt32(dt.Rows[i]["Total Marks"]);
  12. }
  13. Chart1.Series[0].Points.DataBindXY(x, y);
  14. Chart1.Series[0].ChartType = cType;
  15. Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
  16. Chart1.Legends[0].Enabled = true;
  17. }
Step 5

After this call that function in the form load by passing the chart type you need.
  1. // For Area Chart
  2. SeriesChartType type = SeriesChartType.Area;
  3. DisplayChart(type);
default chart
  1. // For Bar Chart
  2. SeriesChartType type = SeriesChartType. Bar;
  3. DisplayChart(type);
Bar Char
  1. // For Bubble Chart
  2. SeriesChartType type = SeriesChartType. Bubble;
  3. DisplayChart(type);
Bubble Chart

In the same way just change the SeriesChartType and display the different design of chart.

For a better understanding of this download the source code attached with this article.

Summary

In this illustration you came to understand how to create various types of charts in ASP.NET.