How to display a Static BarChart in asp.net using Ajax Technology

On By
Hi friend ,today we will learn about bar chart control in asp.net.Here you can easily display the bar char with the help of some predefined data  of different persons for different years.Here we will display the different type of data of Ram,Mohan and Neha for different years (2001-2008) in this bar chart.Before implementing this concepts, you have to install ajax toolkit in your visual studio.
There are some properties of this BarChart as given below:-
  • ChartHeight :- This is helpful to customize the height of the bar chart.
  • ChartWidth  :- This is helpful to customize the width of the bar chart.
  • ChartType :- This is helpful to view the bar chart either column(StakedColumn) or Row(Bar,Stackedbar)
  • ChartTitle:- This is used to set the title of the bar chart.
  • CategoryAxis:- Here you have to put some set of values to create a bar chart .
  • ValueAxisLines:-Here you have to set the interval size for the value axis line.
  • ChartTitleColor:-This is used to set the color of your chart title.
  • CategoryAxisLineColor:-This is helpful to set the color of the category axis line.
  • BaseLineColor:-This is helpful to set the color of the base lines of the chart.
  • ValueAxisLineColor:- This is helpful to set the color of the value axis lines
There are some properties of the BarChartSeries as given below:-
  • Name:-This is a required property.
  • BarColor:- This is helpful to set the color of the bar  for a particular series.
  • Data:- This property is used to set the data for a particular series.
There are some steps to implement this whole concepts on your asp.net website easily.
Step 1:First open your visual studio-->File -->New-->Web Site-->Select ASP.NET Empty website-->OK-->Now open Solution Explorer Window-->Add a New page(Default.aspx)-->open toolbox-->drag and drop  ajax  ToolkitScriptManager   control on the page.
Step 2:Now open Source file-->Drag and drop BarChart control from the Toolbox-->Sets their properties and sets the properties of BarChartSeries also as given below:-

<%@ 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>Welcome to MY.NET Tutorials</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:BarChart ID="BarChart1" runat="server" ChartHeight="400" ChartWidth="550" ChartType="Column"
ChartTitle="Earings in Different Years" CategoriesAxis="2001,2002,2003,2004,2005,2006,2007,2008" 
CategoryAxisLineColor="#D08AD9" ChartTitleColor="#FF0066" BaseLineColor="#66FF33" 
ValueAxisLineColor="#FFCC99" >  
<Series>
<asp:BarChartSeries Name="Ram" BarColor="#CC66FF" 
Data="500, 2500, 3500, 4400,1600, 5400,4700,8930" />
<asp:BarChartSeries Name="Mohan" BarColor="#3399FF" 
Data="1000, 4000, 2600, 3700,1200, 3600,2900,9950" />
<asp:BarChartSeries Name="Neha" BarColor="#FF0066" 
Data="5000, 2700, 6500, 8400,4600, 9400,7700,8030" />
</Series>
</asp:BarChart>
<br />
<span class="style2">For more&nbsp; .Net Concepts visit </span>
<span class="style1"><strong>http://www.msdotnet.co.in</strong></span><br />
</div>
</form>
</body>
</html>
Step 3:Now Run the Application(press F5)-->You will see following output a shown below:-
This is a BarChart for static data,I will explain a BarChart for dynamic data using c# soon...
For more...
Download Whole attached file
      Download
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.