In this article, we will learn about how we can use Chart control in ASP.NET.
Chart control is used to create dynamic graphical charts within minutes.
This is a server-side control, To implement Chart we can drag it from the toolbox of visual studio or ASP.NET provides its own tag to implement Chart. The example is given below.
<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
Example
In this example, we are implementing a chart using Chart control.
Create a new project and select the ASP.NET Empty Web Site.
Here, we create StudentInfo table with given fields.
Firstly click on View menu -> Server Explorer to access a database server either use Ctrl+Alt+S.
Now, right-click on Data Connections -> Add Connection.
Now simply choose (or enter) the server name, enter server authentication details (if required), choose the database name, and click Test Connection then click OK.
The connection will be entered into the Server Explorer window. Now, choose and right-click on Connection -> Properties (Alt+Enter) then copy connection string from Properties window -> Connection -> Connection String.
Now, open Web.config file from Solution Explorer window and then paste connection string as shown below.
<connectionStrings>
<add name="myConnectionString" connectionString="Data Source=DESKTOP-78L7I55;Initial Catalog=Student;User ID=sa;Password=vision" />
</connectionStrings>
Now, right-click the project name (CRUD Operations) in the Solution Explorer and select Add -> Add New Item.
Now, let’s add a new Default.aspx file, select Web Form and click Add.
Open the Default.aspx file and add the code in it.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server">
<Legends>
<asp:Legend Alignment="Center" Docking="Bottom" />
</Legends>
<Series>
<asp:Series Name="Student's Age" XValueMember="Name" YValueMembers="Age">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
Open the Default.aspx.cs file and add the code in it.
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand();
SqlDataAdapter da;
string qry;
protected void Page_Load(object sender, EventArgs e)
{
cn.Open();
qry = "Select * from StudentInfo";
cmd = new SqlCommand(qry, cn);
DataSet ds = new DataSet();
da = new SqlDataAdapter(cmd);
da.Fill(ds);
Chart1.DataSource = ds;
cn.Close();
}
}
That’s it.
Output:
