Bar Chart Control Example With Database In Asp.Net
In this tutorial i will explain how to useĀ Bar Chart Control Example With Database In Asp.Net.We are using SQL Server as backend, on that we have a table with column Student_Names and Student_Marks.In this example we are showing these records in a bar chart.
Design:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How To Use Bar Chart Control In Asp.Net</title>
<style type="text/css">
body
{
margin:0px auto;
width:980px;
font-family:Calibri;
font-size:14px;
}
.bar
{
text-align:center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="text-align:center">How To Use Bar Chart Control In Asp.Net</h2>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:BarChart ID="BarChart1" ChartType="Bar" CssClass="bar" runat="server"></asp:BarChart>
</div>
</form>
</body>
</html>
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class Index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection("Data Source=.;User ID=sa;Password=sa;Initial Catalog=testing");
conn.Open();
SqlCommand cmd = new SqlCommand("select s_name,s_marks from marks", conn);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
string[] x = new string[dt.Rows.Count];
decimal[] y = new decimal[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]);
}
BarChart1.Series.Add(new AjaxControlToolkit.BarChartSeries { Data = y });
BarChart1.CategoriesAxis = string.Join(",", x);
BarChart1.ChartWidth = (x.Length * 160).ToString();
BarChart1.ChartHeight = (y.Length * 50).ToString();
}
}
