Step by step building a bar graph webpage using MS-Charting Tool

Esensahoo
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 19184 red flag

In this article I will be explaining step by step building an application using MS-Charting tool(a free add-on for Visual Studio)


 Download source code for Step by step building a bar graph webpage using MS-Charting Tool

Microsoft Chart Control is a easy to use and light weight add-on to the Visual Studio which can be used to develop bar graph ,pie chart etc using  minimum code. Below article explains step by step how to build a simple bar graph using MS chart control. The bar chart shows the cash positions for different dates reading the values from the database.I have also attached the source code and the database.

Step -1

1.Download and install MS Charting tool from the below link.

http://www.microsoft.com/downloads/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en

Step-2

Create a new webapplication and add reference to below two dlls to your visual studio project.

 

Step-3

Create a table as shown in the  below diagram.
I have used a small table tblCash having below two fields


Cash  (Datatype - Int)
Date (Datetime)

Below are the table records.

 


 

Step - 4

File : Default.aspx

Add the below directive to the aspx page.

<%@ Register assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

Note : Version and Public Key token may change depending on the version of Chart Control you download.  

Copy the below code to the <form> section of the aspx page.

 <asp:Chart id="Chart1" runat="server" BackColor="#FFFFFF" ImageType="Png" Width="412px" Height="296px" BorderDashStyle="Solid" BorderWidth="2" BorderColor="181, 64, 1">
    <BorderSkin SkinStyle="None" BackGradientStyle="None" BackSecondaryColor="SeaShell" BorderColor="#6198dc"       BorderDashStyle="Solid" BorderWidth="1" BackColor="White"></BorderSkin>     

       <Series>
           <asp:Series MarkerSize="3" BackGradientStyle="HorizontalCenter" BorderWidth="1" Name="Series1"                  ChartType="Bar" MarkerStyle="Circle" BorderColor="180, 26, 59, 105" Color="220, 65, 140, 240"                  ShadowOffset="0"></asp:Series>
       </Series>    

       <ChartAreas>
            <asp:ChartArea Name="ChartArea1" BorderWidth="0" BackColor="White" ShadowColor="Transparent">

                <AxisY LineColor="64, 64, 64, 64" LineDashStyle="Solid" LineWidth="2">

                           <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />

                           <MajorGrid LineColor="64, 64, 64, 64" />

                     </AxisY>

                     <AxisX LineColor="64, 64, 64, 64" LineDashStyle="Solid" LineWidth="2">

                           <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />

                           <MajorGrid LineColor="64, 64, 64, 64" />

                     </AxisX>

              </asp:ChartArea>

       </ChartAreas>

</asp:Chart>

File : Default.aspx.cs

Import namespace  using System.Web.UI.DataVisualization.Charting;

Copy the below lines of code to your Page_Load event and modify the connection string to point to you database. The code below is simple I have given comment in each section to explain what it is doing.

//1.Get the Data from the Database to a Dataset

            SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=C:\Projects\MSChartingTool\App_Data\CASH.mdf;Integrated Security=True;User Instance=True");

            SqlDataAdapter adp = new SqlDataAdapter("select * from tblcash", con);

            DataSet ds = new DataSet();

            adp.Fill(ds);

//2.Set the style/Settings for X and Y axis

            Chart1.Font.Size = FontUnit.Medium;

            Chart1.Series["Series1"].XValueType = ChartValueType.DateTime;

            Chart1.Series["Series1"].YValueType = ChartValueType.Int32;

            Chart1.ChartAreas[0].AxisY.Title = "Cash";

            Chart1.ChartAreas[0].AxisX.Title = "Date";

//3.Define the chart type

            Chart1.Series["Series1"].ChartType = SeriesChartType.Bar;

//4.Add the actual values from the dataset to X & Y co-ordinates

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

            {

                Chart1.Series["Series1"].Points.AddXY(ds.Tables[0].Rows[i]["month"], ds.Tables[0].Rows[i]["cash"]);

            }

That’s it.Run the proect we should be able to see graph as below.

 


 

Ref: You can also see  more sample projects on Charting tool at http://code.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591


Thanks!

 

Page copy protected against web site content infringement by Copyscape

About the Author

Esensahoo
Full Name: SATYA SAHOO
Member Level: Starter
Member Status: Member
Member Since: 12/28/2010 8:47:18 AM
Country: India


Working in Misys Software solution having interest in learning and writing on MS.Net technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)