Post
Ask Question

Chart Control in ASP.NET

Look at the image below:

Create a ASP.NET web site project.

ASP.NET web site project

Give Project name : ChartControl

Table Used:

  1. USE [MemberCDAC]  
  2. GO  
  3. /****** Object:  Table [dbo].[tblTotalSales]    Script Date: 02/07/2016 21:50:30 ******/  
  4. SET ANSI_NULLS ON  
  5. GO  
  6. SET QUOTED_IDENTIFIER ON  
  7. GO  
  8. CREATE TABLE [dbo].[tblTotalSales](  
  9.     [SalesMonthID] [int] IDENTITY(1,1) NOT NULL,  
  10.     [SalesMonth] [nvarchar](50) NULL,  
  11.     [Sales] [int] NULL  
  12. ) ON [PRIMARY]  
table

Now right click on Solution Explorer and Add new web page/form.

Right Click->ADD->ADD NEW ITEM.

Add new item

web form

Add the WebForm, named : Default.aspx

In Default.aspx , we are going to bind Chart Control from database.

Now double clicked on Default.aspx file.

Drag n Drop the ChartControl control on aspx page.

Chart

As you dragged Chart Control over ASPX file you can see register command and Web.Config file will updated automatically for CHART CONTROL settings.

ASPX File before drag chart control:

ASPX File

After used chart control on aspx page,

aspx page

Web.Config file before drag chart control,

drag chart control

After used chart control web.config,

web.config

Code of default.aspx,

 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title></title>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.     <div>  
  14.         <asp:Chart ID="Chart1" runat="server">  
  15.             <Series>  
  16.                 <asp:Series Name="Series1" XValueMember="SalesMonth" YValueMembers="Sales" ></asp:Series>  
  17.             </Series>  
  18.             <ChartAreas>  
  19.                 <asp:ChartArea Name="ChartArea1"></asp:ChartArea>  
  20.             </ChartAreas>  
  21.         </asp:Chart>  
  22.     </div>  
  23.     </form>  
  24. </body>  
  25. </html>  
Following is main Setting of Chart Control :
  1. <asp:Series Name="Series1" XValueMember="SalesMonth" YValueMembers="Sales" ></asp:Series>  
Output

Output