Chart Control in ASP.NET

Look at the image below:

Create a ASP.NET web site project.

Give Project name : ChartControl

Table Used:

USE [MemberCDAC]
GO
/****** Object: Table [dbo].[tblTotalSales] Script Date: 02/07/2016 21:50:30 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tblTotalSales](
[SalesMonthID] [int] IDENTITY(1,1) NOT NULL,
[SalesMonth] [nvarchar](50) NULL,
[Sales] [int] NULL
) ON [PRIMARY]

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

Right Click->ADD->ADD NEW ITEM.

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:

After used chart control on aspx page,

aspx page

Web.Config file before drag chart control,

After used chart control web.config,

Code of default.aspx,

<%@ 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">
<Series>
<asp:Series Name="Series1" XValueMember="SalesMonth" YValueMembers="Sales" ></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>

Following is main Setting of Chart Control :

<asp:Series Name="Series1" XValueMember="SalesMonth" YValueMembers="Sales" ></asp:Series>

Output

Output