Guruji Point - Code You Want To Write

  • Home
  • Asp.Net
  • WCF
  • SQL
  • Type Script
  • AngularJS
  • Tech News
  • Blog
  • Earn Online

Sunday, 9 July 2017

Showing Chart With Database In Asp.Net Using C#

 asp.net, C#, chart control     No comments   


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>  
In the above aspx code you can easily see that there is an Register assembly for chart  Assembly="System.Web.DataVisualization .

 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.





  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Facebook Updates

Guruji Point

Categories

Comman table Expression in SQL Dynamic Grid Row IQueryable in c# Learn AngularJS Scope_Identity() Use of indexes comma seperated string in sql row_number() and dense_rank() salary table structure. while loop in sql why do we need cursor why tuple used

About Us

This blog is about the Programming ,Tech News and some intresting facts related Contents. Here you can find fundamental and expert level topic of programming languages very practically related to C# , Asp.Net ,Sql-Server, JavaScript, Jquery, WebServices And also Web-Api, WCF ,WPF, Angular Js.

Contact Us

Email Us - gurujipoints@gmail.com
Contact- 8077657477

Reach Us

Copyright © Guruji Point - Code You Want To Write