Introduction
In this article we will learn how to display the data in asp.net chart control. Showing data in asp.net chart with database or display the chart control form database data.
Previous Updates
In previous articles we have learnt Maintain state of dynamic added userConrol in asp.net using c#. Load the Usercontrol In Aspx Page. Get TextBox , Dropdown, CheckBox control Values In Aspx.cs Page From User Control Using C#. CRUD operation using AngularJS.
Database Structure
Here i am sharing my database table structure and also the insert statement for few data on table.
|
CREATE TABLE
[dbo].[Employee](
[EmpID] [int] NOT NULL IDENTITY(1,1),
[EmployeeCode]
[int] NOT NULL PRIMARY KEY,
[EmployeeName]
[varchar](50) NULL,
[JoiningDate]
[datetime] NULL,
[Mobile] [varchar](15) NULL,
[Address]
[varchar](50) NULL,
[CreatedDate]
[datetime] NULL,
)
|
InsertData Script
|
INSERT INTO
Employee VALUES(110, 'Mark', GETDATE()-5, '9088997788', 'Delhi', Getdate())
INSERT INTO
Employee VALUES(111, 'Nicks', GETDATE()-10, '8899776655', 'UK', Getdate())
INSERT INTO
Employee VALUES(112, 'Takshu', GETDATE()-12, '2233445566', 'Pithoragarh', Getdate())
INSERT INTO
Employee VALUES(113, 'Navi', GETDATE()-18, '9900883377', 'Noida', Getdate())
INSERT INTO
Employee VALUES(114, 'Jimmy', GETDATE()-15, '7766776677', 'Mumbai', Getdate())
INSERT INTO
Employee VALUES(115, 'GLN', GETDATE()-51, '9988998800', 'Delhi', Getdate())
INSERT INTO
Employee VALUES(116, 'Shommy', GETDATE()-52, '0099009900', 'Uttarakhand', Getdate())
INSERT INTO
Employee VALUES(117, 'Gippy', GETDATE()-50, '8878878879', 'Banglore', Getdate())
INSERT INTO
Employee VALUES(118, 'Shiv', GETDATE()-50, '8878878879', 'Mumbai', Getdate())
INSERT INTO
Employee VALUES(119, 'Kevi', GETDATE()-50, '8878878879', 'Mumbai', Getdate())
INSERT INTO
Employee VALUES(120, 'Kevi', GETDATE()-50, '0022113344', 'Pithoragarh', Getdate())
|
Run the Select Command for Get the Data
|
SELECT *
FROM Employee
|
Aspx Page :
To use the chart Control you can easily drag and drop the control from your asp Toolbox or you can paste this code to get it easily.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisplayDataInChart.aspx.cs"
Inherits="DisplayDataInChart" %>
<%@ 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>Displaying Employee Details in Chart</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="EmpChart" runat="server">
<Series>
<asp:Series Name="Series1"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
|
Aspx.cs Page :
|
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
GetEmployeeChartDetail();
}
private void GetEmployeeChartDetail()
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(@"Data Source=JP-PC;
Initial Catalog=TsetDB;Integrated Security=true"))
{
con.Open();
SqlCommand cmd = new
SqlCommand("SELECT Address as Name, COUNT(EMPLOYEECODE) AS Total
FROM Employee GROUP BY Address", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
con.Close();
}
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]);
}
EmpChart.Series[0].Points.DataBindXY(x, y);
EmpChart.Series[0].ChartType =
System.Web.UI.DataVisualization.Charting.SeriesChartType.Pie;
EmpChart.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
}
|
If You Run this code now then you get the Error like this
This is Because you need to change the Web.config file for display the chart control. So change the Web.config according to this code
Web.config file change
<?xml version="1.0"?>
<configuration>
<appSettings>
<add key="ChartImageHandler" value="storage=file; timeout=20;" />
</appSettings>
<system.web>
<compilation debug="true" targetFramework="4.5">
<assemblies>
<add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35"/>
</assemblies>
</compilation>
<httpRuntime targetFramework="4.5"/>
</system.web>
<system.webServer>
<handlers>
<remove name="ChartImageHandler" />
<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</handlers>
</system.webServer>
</configuration>
|
Now run the code and you have done it.
0 comments:
Post a Comment