In this article I’m going to explain how to create dynamic Ajax Bar Chart in ASP.NET using C#.
Ajax Control toolkit provides a ways to create Bar Chart that would be display the statistics data in graphical representation. The BarChart control enables you to render a bar chart from one or more series of values. I already wrote some articles related to ASP.NET Chart
Here I’ll show you how to create dynamic Ajax Bar Chart, in this demo I’ve used Northwinddatabase to populate dynamic Bar chart
Please follow the link to download Northwind database
Here I’ll explain some properties of Ajax BarChart
Sample code:
<ajaxtoolkit:barchart id="BarChart1" runat="server"
chartheight="300" chartwidth="450"
charttype="Column" charttitle="Sample chart title"
categoriesaxis="2007,2008,2009,2010,2011,2012"
charttitlecolor="#0E426C" categoryaxislinecolor="#D08AD9"
valueaxislinecolor="#D08AD9" baselinecolor="#A156AB">
<Series>
<ajaxToolkit:BarChartSeries Name="United States" BarColor="#6C1E83"
Data="110, 189, 255, 95, 107, 140" />
<ajaxToolkit:BarChartSeries Name="Europe" BarColor="#D08AD9"
Data="49, 77, 95, 68, 70, 79" />
</Series>
</ajaxtoolkit:barchart>
BarChart Properties:
ChartHeight - This property enables you to customize the height of the chart.
ChartWidth - This property enables you to customize the width of the chart.
ChartTitle - This property enables you to set the title of the chart.
CategoryAxis - This is a required property. You need to provide a set of values for the category axis to create a bar chart.
ChartType - This property enables you to render different types of bar charts including Column, StackedColumn, Bar, and StackedBar.
Theme - This property enables you to control the appearance of the bar chart with a Cascading Style Sheet file.
ValueAxisLines - This property enables you to set the interval size for the value axis line.
ChartTitleColor - This property enables you to set the font color of the chart title.
CategoryAxisLineColor - This property enables you to set the color of the category axis lines.
ValueAxisLineColor - This property enables you to set the the color of the value axis lines.
BaseLineColor - This property enables you to set the color of the base lines of the chart.
BarChartSeries Properties:
Name - This property is required.
Data - This property is required and provides data for a particular series.
BarColor - This property enables you to set the color of bar for a particular series.
Designer source code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax bar Chart</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:BarChart ID="BarChart1" runat="server" ChartHeight="300" ChartWidth="600"ChartType="Column"
ChartTitle="Suppliers">
</asp:BarChart>
</div>
</form>
</body>
</html>
Code behind:
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 _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindChart();
}
}
protected void BindChart()
{
SqlConnection conn = new SqlConnection("Data Source=SPIDER;Initial Catalog=Northwind;Integrated Security=True");
DataSet ds = new DataSet();
DataTable dt = new DataTable();
conn.Open();
string cmdstr = "select top 10 Country, COUNT(CompanyName) [Total Suppliers] from [Suppliers] 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]["Total Suppliers"]);
}
BarChart1.CategoriesAxis = category.Remove(0, 1);
BarChart1.Series.Add(new AjaxControlToolkit.BarChartSeries { Data = values, BarColor="#2fd1f9", Name = "Suppliers" });
}
}
Comments
Post a Comment