Post
Ask Question

Column and StackedColumn Charts in ASP.Net

Background
 
ASP.Net Chart is a powerful control for creating interactive charts. Today we will discuss the Column and StackedColumn 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

Use the following script to create and insert data into the table for the chart:
  1. SET ANSI_NULLS ON        
  2. GO        
  3. SET QUOTED_IDENTIFIER ON        
  4. GO        
  5. SET ANSI_PADDING ON        
  6. GO        
  7. CREATE TABLE [dbo].[orderdet](        
  8.     [id] [int] IDENTITY(1,1) NOT NULL,        
  9.     [Month] [varchar](50) NULL,        
  10.     [Orders] [int] NULL,        
  11.  CONSTRAINT [PK_Order Table] PRIMARY KEY CLUSTERED         
  12. (        
  13.     [id] ASC        
  14. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]        
  15. ) ON [PRIMARY]        
  16.         
  17. GO        
  18. SET ANSI_PADDING OFF        
  19. GO        
  20. SET IDENTITY_INSERT [dbo].[orderdet] ON         
  21.         
  22. GO        
  23. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (1, N'Jan', 0)        
  24. GO        
  25. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (2, N'Feb', 5)        
  26. GO        
  27. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (3, N'March', 20)        
  28. GO        
  29. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (4, N'April', 40)        
  30. GO        
  31. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (5, N'May', 15)        
  32. GO        
  33. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (6, N'Jun', 60)        
  34. GO        
  35. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (7, N'July', 75)        
  36. GO        
  37. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (8, N'Aug', 80)        
  38. GO        
  39. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (9, N'Sep', 85)        
  40. GO        
  41. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (10, N'Oct', 100)        
  42. GO        
  43. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (11, N'Nov', 2)        
  44. GO        
  45. INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (12, N'Dec', 90)        
  46. GO        
  47. SET IDENTITY_INSERT [dbo].[orderdet] OFF        
  48. 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 [dbo].[GetCharData]      
  2. (      
  3. @id int =null      
  4.       
  5. )      
  6. as      
  7. begin      
  8. Select Month,Orders from Orderdet      
  9. End  
Step 3

Create a Web Application. 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 "UsingColumnandSatckedColumnChart" 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="64, 0, 0"  
  17.         Width="360px" BorderlineColor="192, 64, 0">  
  18.         <Series>  
  19.             <asp:Series Name="Series1"  YValuesPerPoint="12">  
  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. Then 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.     DataTable ChartData = ds.Tables[0];    
  10.     //storing total rows count to loop on each Record    
  11.     string[] XPointMember = new string[ChartData.Rows.Count];    
  12.     int[] YPointMember = new int[ChartData.Rows.Count];    
  13.     for (int count = 0; count < ChartData.Rows.Count; count++)    
  14.     {    
  15.         //storing Values for X axis    
  16.         XPointMember[count] = ChartData.Rows[count]["Month"].ToString();    
  17.         //storing values for Y Axis    
  18.         YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);    
  19.     }    
  20.     //binding chart control    
  21.     Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);    
  22.   
  23.     //Setting width of line    
  24.     Chart1.Series[0].BorderWidth = 10;    
  25.     //setting Chart type     
  26.    Chart1.Series[0].ChartType = SeriesChartType.Column;    
  27.    //Chart1.Series[0].ChartType = SeriesChartType.StackedColumn;    
  28.     //Hide or show chart back GridLines    
  29.     Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;    
  30.     Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;    
  31.     //Enabled 3D    
  32.     //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;    
  33.     con.Close();    
  34. } 
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. } 
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.     protected void Page_Load(object sender, EventArgs e)    
  24.     {    
  25.         if (!IsPostBack)    
  26.         {    
  27.             Bindchart();  
  28.         }    
  29.     }    
  30.     private void Bindchart()    
  31.     {    
  32.         connection();    
  33.         com = new SqlCommand("GetCharData", con);    
  34.         com.CommandType = CommandType.StoredProcedure;    
  35.         SqlDataAdapter da = new SqlDataAdapter(com);    
  36.         DataSet ds = new DataSet();    
  37.         da.Fill(ds);   
  38.         DataTable ChartData = ds.Tables[0];    
  39.         //storing total rows count to loop on each Record    
  40.         string[] XPointMember = new string[ChartData.Rows.Count];    
  41.         int[] YPointMember = new int[ChartData.Rows.Count];    
  42.         for (int count = 0; count < ChartData.Rows.Count; count++)    
  43.         {    
  44.             //storing Values for X axis    
  45.             XPointMember[count] = ChartData.Rows[count]["Month"].ToString();    
  46.             //storing values for Y Axis    
  47.             YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);  
  48.         }    
  49.         //binding chart control    
  50.         Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);    
  51.         //Setting width of line    
  52.         Chart1.Series[0].BorderWidth = 10;    
  53.         //setting Chart type     
  54.        Chart1.Series[0].ChartType = SeriesChartType.Column;    
  55.        //Chart1.Series[0].ChartType = SeriesChartType.StackedColumn;    
  56.         //Hide or show chart back GridLines    
  57.         Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;    
  58.         Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
  59.         //Enabled 3D    
  60.         //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;    
  61.         con.Close();   
  62.     }    
  63. } 
Now, we have the entire logic to bind the chart from the database, let us run the application. The Column Chart will look as follows:
 
 
Now hide the chart Grid Lines as:
  1. //Hide or show chart back GridLines    
  2. Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;    
  3. Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;   
Then the Column 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 StackedColumn chart as in the following:
  1. //setting Chart type   
  2.       Chart1.Series[0].ChartType = SeriesChartType.StackedColumn; 
Now run the application and the StackedColumn type chart will look as follows:
 
 
Now hide the chart Grid Lines as:
  1. //Hide or show chart back GridLines    
  2.  Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;    
  3.   Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;   
Then the StackedColumn 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 the 3D style StackedColumn Chart will look as follows:
 
 
Now from all the preceding explanations, we saw how to create and use a Column and StackedColumn 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.


Similar Articles