ASP.NET

Area and SplineArea Chart in ASP.Net

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
  1. CREATE TABLE [dbo].[orderdet](  
  2.     [id] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Month] [varchar](50) NULL,  
  4.     [Orders] [int] NULL,  
  5.  CONSTRAINT [PK_Order Table] PRIMARY KEY CLUSTERED   
  6. (  
  7.     [id] ASC  
  8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  9. ) ON [PRIMARY] 
 Now insert some records into the table using the following script:
  1. SET IDENTITY_INSERT [dbo].[orderdet] ON   
  2.   
  3. GO  
  4. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (1, N'Jan', 0)  
  5. GO  
  6. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (2, N'Feb', 5)  
  7. GO  
  8. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (3, N'March', 20)  
  9. GO  
  10. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (4, N'April', 40)  
  11. GO  
  12. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (5, N'May', 15)  
  13. GO  
  14. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (6, N'Jun', 60)  
  15. GO  
  16. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (7, N'July', 75)  
  17. GO  
  18. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (8, N'Aug', 80)  
  19. GO  
  20. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (9, N'Sep', 85)  
  21. GO  
  22. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (10, N'Oct', 100)  
  23. GO  
  24. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (11, N'Nov', 2)  
  25. GO  
  26. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (12, N'Dec', 90)  
  27. GO  
  28. SET IDENTITY_INSERT [dbo].[orderdet] OFF  
  29. 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.
  1. Create procedure GetCharData  
  2. (  
  3. @id int =null  
  4.   
  5. )  
  6. as  
  7. begin  
  8. Select Month,Orders from Orderdet  
  9. End 
 Step 3: Create Web Application

Now create the website with:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".

  2. "File" - "New Project" - "C#" - "Empty Website" (to avoid adding a master page).

  3. Provide the project a name such as AreaAndSplineArea or another as you wish and specify the location.

  4. Then right-click on the Solution Explorer and select "Add New Item" then select Default.aspx page.

  5. Drag and Drop a Chart control from the ToolBox onto the Default.aspx page.
Now the Default.aspx source code will be as follows:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  
  4.     Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6. <html xmlns="http://www.w3.org/1999/xhtml">  
  7. <head runat="server">  
  8.     <title>Article by Vithal Wadje</title>  
  9. </head>  
  10. <body bgcolor="blue">  
  11.     <form id="form1" runat="server">  
  12.     <h4 style="color: White;">  
  13.         Article for C#Corner  
  14.     </h4>  
  15.     <asp:Chart ID="Chart1" runat="server" BackColor="128, 64, 0" BackGradientStyle="LeftRight"  
  16.         BorderlineWidth="0" Height="340px" Palette="None" PaletteCustomColors="Maroon"  
  17.         Width="360px">  
  18.         <Series>  
  19.             <asp:Series Name="Series1" ChartType="Area">  
  20.             </asp:Series>  
  21.         </Series>  
  22.         <ChartAreas>  
  23.             <asp:ChartArea Name="ChartArea1">  
  24.             </asp:ChartArea>  
  25.         </ChartAreas>  
  26.     </asp:Chart>  
  27.     </form>  
  28. </body>  
  29. </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:
  1. private void Bindchart()  
  2.    {  
  3.        connection();  
  4.        com = new SqlCommand("GetCharData", con);  
  5.        com.CommandType = CommandType.StoredProcedure;  
  6.        SqlDataAdapter da = new SqlDataAdapter(com);  
  7.        DataSet ds = new DataSet();  
  8.        da.Fill(ds);  
  9.       
  10.        DataTable ChartData=ds.Tables[0];  
  11.   
  12.        //storing total rows count to loop on each Record  
  13.        string[] XPointMember = new string[ChartData.Rows.Count];  
  14.        int[] YPointMember = new int[ChartData.Rows.Count];  
  15.   
  16.        for (int count = 0; count < ChartData.Rows.Count;count++ )  
  17.        {  
  18.            //storing Values for X axis  
  19.            XPointMember[count] = ChartData.Rows[count]["Month"].ToString();  
  20.            //storing values for Y Axis  
  21.            YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);  
  22.   
  23.   
  24.        }  
  25.      //binding chart control  
  26.        Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);  
  27.   
  28.        //Setting width of line  
  29.        Chart1.Series[0].BorderWidth =1;  
  30.        //setting Chart type   
  31.    Chart1.Series[0].ChartType = SeriesChartType.Area ;  
  32.    Chart1.Series[0].ChartType = SeriesChartType.SplineArea;  
  33.   
  34.  //Hide or show chart back GridLines  
  35.  // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
  36.   //Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
  37.   
  38.    //Enabled 3D  
  39.   //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  40.          
  41.        con.Close();  
  42.   
  43.    } 
 Now, call the preceding function on page load as in the following:
  1. protected void Page_Load(object sender, EventArgs e)  
  2.   {  
  3.       if (!IsPostBack)  
  4.       {  
  5.           Bindchart();  
  6.   
  7.       }  
  8.   } 
 The entire code of the default.aspx.cs page will look as follows:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data.SqlClient;  
  8. using System.Configuration;  
  9. using System.Data;  
  10. using System.Web.UI.DataVisualization.Charting;  
  11.   
  12. public partial class _Default : System.Web.UI.Page  
  13. {  
  14.     private SqlConnection con;  
  15.     private SqlCommand com;  
  16.     private string constr, query;  
  17.     private void connection()  
  18.     {  
  19.         constr = ConfigurationManager.ConnectionStrings["getconn"].ToString();  
  20.         con = new SqlConnection(constr);  
  21.         con.Open();  
  22.   
  23.     }  
  24.     protected void Page_Load(object sender, EventArgs e)  
  25.     {  
  26.         if (!IsPostBack)  
  27.         {  
  28.             Bindchart();  
  29.   
  30.         }  
  31.     }  
  32.    
  33.     private void Bindchart()  
  34.     {  
  35.         connection();  
  36.         com = new SqlCommand("GetCharData", con);  
  37.         com.CommandType = CommandType.StoredProcedure;  
  38.         SqlDataAdapter da = new SqlDataAdapter(com);  
  39.         DataSet ds = new DataSet();  
  40.         da.Fill(ds);  
  41.        
  42.         DataTable ChartData=ds.Tables[0];  
  43.   
  44.         //storing total rows count to loop on each Record  
  45.         string[] XPointMember = new string[ChartData.Rows.Count];  
  46.         int[] YPointMember = new int[ChartData.Rows.Count];  
  47.   
  48.         for (int count = 0; count < ChartData.Rows.Count;count++ )  
  49.         {  
  50.             //storing Values for X axis  
  51.             XPointMember[count] = ChartData.Rows[count]["Month"].ToString();  
  52.             //storing values for Y Axis  
  53.             YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);  
  54.   
  55.   
  56.         }  
  57.       //binding chart control  
  58.         Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);  
  59.   
  60.         //Setting width of line  
  61.         Chart1.Series[0].BorderWidth =1;  
  62.         //setting Chart type 
  63.   // Chart1.Series[0].ChartType = SeriesChartType.Area ; 
  64.     Chart1.Series[0].ChartType = SeriesChartType.SplineArea;  
  65.   
  66.   //Hide or show chart back GridLines  
  67.   // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
  68.    //Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
  69.    
  70.         //Enabled 3D  
  71.    //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  72.   
  73.           
  74.         con.Close();  
  75.   
  76.     }  
  77. } 
 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:
  1. Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
  2. Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false; 
Then the Area chart will look as follows:
 
 
 
 Now enable the 3D Style as in the following:
  1. //Enabled 3D  
  2.   Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
 
 
Now let us switch to a SplineArea chart as in the following:
  1. 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:
  1. //Hide or show chart back GridLines  
  2. Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
  3. 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:  
  1. //Enabled 3D  
  2.  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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs