Chart
Control is used full for drawing char in Webpage we can fill data in chart
control and display a graph in page so user can understand easily. Here we will
draw chart in webpage from database so data will be from Sql server and draw a
graph in page using AjaxControlToolKit and chart controls. Here we will create
area Chart from Database. It’s pretty easy to Bind Chart from database. So
let’s Start How to achieve this functionality in dot net.
Create publishers table in your database
and fill some data.
CREATE TABLE [dbo].[publishers](
[pub_id] [int] IDENTITY(1,1) NOT NULL,
[pub_name] [varchar](50) NOT NULL,
[state] [varchar](50) NOT NULL,
[country] [varchar](50) NOT NULL,
[Amounts] [bigint] NULL,
CONSTRAINT
[PK_publishers] PRIMARY KEY CLUSTERED
(
[pub_id] ASC
)WITH
(PAD_INDEX
= OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS
= ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
Step 1: Design your
Webpage like below.
<div style="width: 831px">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:AreaChart ID="AreaChart1" runat="server" ChartHeight="300" ChartWidth="600"
ChartType="Basic" ChartTitleColor="#0E426C" CategoryAxisLineColor="c4c6c6" ValueAxisLineColor="c4c6c6"
BaseLineColor="Black" Width="599px">
</asp:AreaChart>
</div>
Step 2: Now register
AjaxControlToolKit in your Webpage.
<%@ RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1"%>
Step 3: now create a
Connection String Web.Config File so we can use on every page when we want data
connection from database. It is secure to use connection string in Web.Config
file. Or else you can use inline in you code behind file
<connectionStrings>
<add connectionString="Data Source= ServerName;Initial
Catalog= DatabaseName;Integrated Security=True" providerName="System.Data.SqlClient" name="DBCS"/>
</connectionStrings>
One more thing has to
keep in mind to Create handler in Web.Config file in that System. Web tab.
<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization,
Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
Step 4: Now bind Chart
control from database in Page_load () event so when page load first time then
we can See data in Chart Controls.
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindChart();
}
}
protected void BindChart()
{
SqlConnection
conn = new SqlConnection("Your Connection String");
DataSet
ds = new DataSet();
DataTable
dt = new DataTable();
conn.Open();
string
cmdstr = "select country,COUNT(pub_name)
[Publisher Name] from publishers group by country";
SqlCommand
cmd = new SqlCommand(cmdstr,
conn);
SqlDataAdapter
adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
string
category = "";
decimal[]
values = new decimal[dt.Rows.Count];
for
(int i = 0; i < dt.Rows.Count; i++)
{
category = category + "," + dt.Rows[i]["country"].ToString();
values[i] = Convert.ToDecimal(dt.Rows[i]["Publisher Name"]);
}
AreaChart1.CategoriesAxis =
category.Remove(0, 1);
AreaChart1.Series.Add(new AjaxControlToolkit.AreaChartSeries
{ Data = values, AreaColor = "#3dc0f4",
Name = "publishers" });
}
Now run your Webpage
and there you can see you AreaChart in browser.
Thanks for comments.....