D365 F&O Solutions: How to Create Chart in Asp.Net

How to Create Chart in Asp.Net

Here We Will Create Char Control in dot net. In this article I’m going to explain how to bind chart control from database in ASP.NET using C#. The Chart controls enable you to create ASP.NET pages with simple, intuitive, and visually compelling charts for complex statistical or financial analysis. Here I’ll show you how to bind chart from SQL Server database. You could follow the steps given below.

If you open up your default.aspx and look at the toolbox, you will find the "Chart" Control in the section "Data".

Create Employee table in your Sql Server

CREATE TABLE [dbo].[Employee](

[EmpID] [int] IDENTITY(1,1) NOT NULL,

[FirstName] [varchar](50) NULL,

[LastName] [varchar](50) NULL,

[Salary] [int] NULL,

[Address] [varchar](100) NULL,

[Location] [varchar](50) NULL,

CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED

(

[EmpID] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

Now create Webpage and design for chart.

CODE:

<div>

<asp:Chart ID="Chart1" runat="server">

<asp:Title ShadowOffset="3" Name="Items" />

</Titles>

<asp:Series Name="Series1">

</asp:Series>

</Series>

<asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default"

LegendStyle="Row" />

</Legends>

<asp:ChartArea Name="ChartArea1">

</asp:ChartArea>

</ChartAreas>

</asp:Chart>

</div>

CODE BEHIND:

private static DataTable GetData(string query)

{

string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;

SqlConnection con;

SqlCommand cmd;

SqlDataAdapter da;

DataTable dt;

con = new SqlConnection(CS);

cmd = new SqlCommand();

cmd.CommandText = "select FirstName,Salary from Employee";

cmd.Connection = con;

da = new SqlDataAdapter(cmd);

dt = new DataTable();

da.Fill(dt);

return dt;

}

string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;

SqlConnection con;

SqlCommand cmd;

SqlDataAdapter da;

DataTable dt;

// DataSet ds;

protected void Page_Load(object sender, EventArgs e)

{

string sql = "select FirstName,Salary from Employee";

SqlCommand cmd = new SqlCommand(sql, con);

SqlDataAdapter mySQLadapter = new SqlDataAdapter(cmd);

DataTable dt = GetData(sql);

string[] x = new string[dt.Rows.Count];

int[] y = new int[dt.Rows.Count];

for (int i = 0; i < dt.Rows.Count; i++)

{

x[i] = dt.Rows[i][0].ToString();

y[i] = Convert.ToInt32(dt.Rows[i][1]);

}

Chart1.Series[0].Points.DataBindXY(x, y);

Chart1.DataSource = cmd;

// set series members names for the X and Y values

// Chart1.Series["Series1"].XValueMember = "FirstName";

// Chart1.Series["Series2"].YValueMembers = "Salary";

// Chart1.Series[0].ChartType = SeriesChartType.Bar;

//Chart1.Series["Series2"].ChartType = SeriesChartType.Pie;

Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;

Chart1.Legends[0].Enabled = true;

// data bind to the selected data source

Chart1.DataBind();

cmd.Dispose();

}

Web.config File

</appSettings>

At <system.web><httpHandlers>, the following entry will be added:

In the node <system.web><pages><controls>, the tag-definition will be added

At the end, a reference to the DataVisualization assembly will be added at <system.web><compilation><assemblies>

Or else you can register in page datavisualization

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

D365 F&O Solutions

How to Create Chart in Asp.Net

Author : Umesh Patel

Related Posts