Background
ASP.Net chart is a powerful control that creates interactive charts. Today we will discuss the Area and SplineArea charts of ASP.Net. So let us start to learn about these chart type controls step-by-step.
Let us explain it with a practical example by creating a simple web application.
Step 1: Create the table for the chart data
- CREATE TABLE [dbo].[orderdet](
- [id] [int] IDENTITY(1,1) NOT NULL,
- [Month] [varchar](50) NULL,
- [Orders] [int] NULL,
- CONSTRAINT [PK_Order Table] PRIMARY KEY CLUSTERED
- (
- [id] ASC
- )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
- ) ON [PRIMARY]
Now insert some records into the table using the following script:
- SET IDENTITY_INSERT [dbo].[orderdet] ON
-
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (1, N'Jan', 0)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (2, N'Feb', 5)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (3, N'March', 20)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (4, N'April', 40)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (5, N'May', 15)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (6, N'Jun', 60)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (7, N'July', 75)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (8, N'Aug', 80)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (9, N'Sep', 85)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (10, N'Oct', 100)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (11, N'Nov', 2)
- GO
- INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (12, N'Dec', 90)
- GO
- SET IDENTITY_INSERT [dbo].[orderdet] OFF
- GO
After running the preceding script the records in the table will look as follows:
Step 2: Create a Stored Procedure to fetch the records from the database.
- Create procedure GetCharData
- (
- @id int =null
-
- )
- as
- begin
- Select Month,Orders from Orderdet
- End
Step 3: Create Web Application
Now create the website
with:
- "Start" - "All Programs" - "Microsoft Visual Studio 2010".
- "File" - "New Project" - "C#" - "Empty Website" (to avoid adding a master page).
- Provide the project a name such as AreaAndSplineArea or another as you wish and specify the location.
- Then right-click on the Solution Explorer and select "Add New Item" then select Default.aspx page.
- Drag and Drop a Chart control from the ToolBox onto the Default.aspx page.
Now the Default.aspx source code will be as follows:
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
-
- <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
- Namespace="System.Web.UI.DataVisualization.Charting" 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>Article by Vithal Wadje</title>
- </head>
- <body bgcolor="blue">
- <form id="form1" runat="server">
- <h4 style="color: White;">
- Article for C#Corner
- </h4>
- <asp:Chart ID="Chart1" runat="server" BackColor="128, 64, 0" BackGradientStyle="LeftRight"
- BorderlineWidth="0" Height="340px" Palette="None" PaletteCustomColors="Maroon"
- Width="360px">
- <Series>
- <asp:Series Name="Series1" ChartType="Area">
- </asp:Series>
- </Series>
- <ChartAreas>
- <asp:ChartArea Name="ChartArea1">
- </asp:ChartArea>
- </ChartAreas>
- </asp:Chart>
- </form>
- </body>
- </html>
Step 4: Create a method to bind the chart control
Now open the default.aspx.cs page and create the following function named Bindchart to bind the Chart Control as in the following:
- private void Bindchart()
- {
- connection();
- com = new SqlCommand("GetCharData", con);
- com.CommandType = CommandType.StoredProcedure;
- SqlDataAdapter da = new SqlDataAdapter(com);
- DataSet ds = new DataSet();
- da.Fill(ds);
-
- DataTable ChartData=ds.Tables[0];
-
-
- string[] XPointMember = new string[ChartData.Rows.Count];
- int[] YPointMember = new int[ChartData.Rows.Count];
-
- for (int count = 0; count < ChartData.Rows.Count;count++ )
- {
-
- XPointMember[count] = ChartData.Rows[count]["Month"].ToString();
-
- YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);
-
-
- }
-
- Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);
-
-
- Chart1.Series[0].BorderWidth =1;
-
- Chart1.Series[0].ChartType = SeriesChartType.Area ;
- Chart1.Series[0].ChartType = SeriesChartType.SplineArea;
-
-
-
-
-
-
-
-
- con.Close();
-
- }
Now, call the preceding function on page load as in the following:
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!IsPostBack)
- {
- Bindchart();
-
- }
- }
The entire code of the default.aspx.cs page will look as follows:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.Data.SqlClient;
- using System.Configuration;
- using System.Data;
- using System.Web.UI.DataVisualization.Charting;
-
- public partial class _Default : System.Web.UI.Page
- {
- private SqlConnection con;
- private SqlCommand com;
- private string constr, query;
- private void connection()
- {
- constr = ConfigurationManager.ConnectionStrings["getconn"].ToString();
- con = new SqlConnection(constr);
- con.Open();
-
- }
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!IsPostBack)
- {
- Bindchart();
-
- }
- }
-
- private void Bindchart()
- {
- connection();
- com = new SqlCommand("GetCharData", con);
- com.CommandType = CommandType.StoredProcedure;
- SqlDataAdapter da = new SqlDataAdapter(com);
- DataSet ds = new DataSet();
- da.Fill(ds);
-
- DataTable ChartData=ds.Tables[0];
-
-
- string[] XPointMember = new string[ChartData.Rows.Count];
- int[] YPointMember = new int[ChartData.Rows.Count];
-
- for (int count = 0; count < ChartData.Rows.Count;count++ )
- {
-
- XPointMember[count] = ChartData.Rows[count]["Month"].ToString();
-
- YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);
-
-
- }
-
- Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);
-
-
- Chart1.Series[0].BorderWidth =1;
-
- // Chart1.Series[0].ChartType = SeriesChartType.Area ;
- Chart1.Series[0].ChartType = SeriesChartType.SplineArea;
-
-
-
-
-
-
-
-
-
- con.Close();
-
- }
- }
Now, we have the entire logic to bind the chart from the database, let us run the application. The Area chart will look such as follows:
Now hide the chart Grid Lines as:
- Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
- Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
Then the Area chart will look as follows:
Now enable the 3D Style as in the following:
-
- Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Now let us switch to a SplineArea chart as in the following:
- Chart1.Series[0].ChartType = SeriesChartType.SplineArea;
Now run the application and the SplineArea type chart will look as follows:
Now hide the chart Grid Lines of SplineArea chart as in the following:
-
- Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
- Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
Now the chart will look as follows:
The preceding is the Normal SplineArea chart. Now let us enable the 3D style as in the following:
-
- Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Now run the application and the SplineArea3D chart will look as follows:
Now from all the preceding explanations we saw how to create and use an Area and SplineArea chart.
Notes
- Download the Zip file from the attachment for the full source code of the application.
- Change the connection string in the web.config file to specify your server location.
Summary
My next article explains another chart type of ASP.Net. I hope this article is useful for all readers, if you have any suggestion then please contact me including beginners also.