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!