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
    
    • (3) Comments
    View All Comments
    User Image
     
    Message
    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

    Sign-Up Now

    For Basic members:

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

    $20

    $

    . 00

    monthly

    Sign-Up Now

    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

    Sign-Up Now

    For Elite members:

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