Post
Ask Question

Pyramid and Funnel Chart In ASP.Net

Background

Sometimes we need to show data in a chart like a Pyramid chart, such as to show quarterly data and on, so by considering the preceding requirement and to introduce the ASP.Net Pyramid and Funnel Chart controls I have decided to write this article.

Let us learn about the ASP.Net chart types Pyramid and Funnel that provide a powerful UI and design quality. So let us start to learn about these chart type controls step-by-step. All the charts are in the System.Web.UI.DataVisualization.Charting namespace.
 
Chart data is represented using the following points:
  1. X Axis: the horizontal line of the chart termed the X axis
  2. Y Axis: the vertical line of the chart termed the Y axis

Now let us learn about the properties of the Pyramid and Funnel charts.

A Pyramid and Funnel chart type has the following common properties:
  • AlternetText: Sets the alternate text when the image is not available
  • Annotation: Stores the chart annotations
  • AntiAliasing: sets a value that determines whether anti-aliasing is used when text and graphics are drawn
  • BackGradientStyle: sets the orientation for the background gradient for the Chart control. Also determines whether a gradient is used, the default is None
  • Backcolor: sets the background color for a chart, the default color is White
  • BackImage: sets the background image for the chart control.
  • BackHatchStyle: sets the hatching style for the chart control, the default is None.
  • Height: Sets the height for the chart control
  • Width: Sets the width for the chart control
  • Palette: Sets the style with the color for the chart control, the default style is Chocolate.
  • PaletteCustomColors: Sets the custom color for the chart control.
  • Series: Sets the series collection for the chart control
  • Legends: Sets the series of legends to the chart

Now let us show the preceding explanation with a practical example by creating a simple web application.

Step 1: Create the table for the chart data
 
Now before creating the application, let us create a table named QuarterwiseSale in a database from where we show the records in the chart, the table has the following fields (shown in the following image):
 
 
Now insert some records as listed in the following image into the table:
 
 
I hope you have the same type of table and records as above.
 
Step: 2 Create Web Application

Now create the project using the following:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".

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

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

  4. Then right-click on 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="grey">  
  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">  
  16.         <Series>  
  17.             <asp:Series Name="Series1">  
  18.             </asp:Series>  
  19.         </Series>  
  20.         <ChartAreas>  
  21.             <asp:ChartArea Name="ChartArea1">  
  22.             </asp:ChartArea>  
  23.         </ChartAreas>  
  24.     </asp:Chart>  
  25.   
  26.   
  27.     </form>  
  28. </body>  
  29. </html> 
Create a function to bind the chart control as in the following:
  1. private void Bindchart()    
  2. {    
  3.     connection();    
  4.     query = "select *from QuarterwiseSale";//not recommended this i have written just for example,write stored procedure for security    
  5.     com = new SqlCommand(query, con);    
  6.     SqlDataAdapter da = new SqlDataAdapter(query, con);    
  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]["Quarter"].ToString();    
  17.         //storing values for Y Axis    
  18.         YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["SalesValue"]);    
  19.     }    
  20.     //binding chart control    
  21.     Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);    
  22.     //setting Chart type     
  23.     Chart1.Series[0].ChartType = SeriesChartType.Pyramid;    
  24.     // Chart1.Series[0].ChartType = SeriesChartType.Funnel;    
  25.     //  Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  26.     con.Close();  
  27. }    
 
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.     private void Bindchart()  
  33.     {  
  34.         connection();  
  35.         query = "select *from QuarterwiseSale";//not recommended this i have written just for example,write stored procedure for security  
  36.         com = new SqlCommand(query, con);  
  37.         SqlDataAdapter da = new SqlDataAdapter(query, con);  
  38.         DataSet ds = new DataSet();  
  39.         da.Fill(ds);  
  40.        
  41.         DataTable ChartData=ds.Tables[0];  
  42.   
  43.         //storing total rows count to loop on each Record  
  44.         string[] XPointMember = new string[ChartData.Rows.Count];  
  45.         int[] YPointMember = new int[ChartData.Rows.Count];  
  46.   
  47.         for (int count = 0; count < ChartData.Rows.Count;count++ )  
  48.         {  
  49.             //storing Values for X axis  
  50.             XPointMember[count] = ChartData.Rows[count]["Quarter"].ToString();  
  51.             //storing values for Y Axis  
  52.             YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["SalesValue"]); 
  53.         }  
  54.         //binding chart control  
  55.         Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);  
  56.         //setting Chart type   
  57.         Chart1.Series[0].ChartType = SeriesChartType.Pyramid;  
  58.         // Chart1.Series[0].ChartType = SeriesChartType.Funnel;  
  59.         //  Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  60.         con.Close();  
  61.   
  62.     }  
  63. } 
We now have the entire logic to bind the chart from the database, let us run the application. The chart will look as follows:
 
 
In the preceding chart we saw how the data is properly arranged with the user interactive graphics, now let us set the 3D style enabled as in the following:
  1. Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; 
Now the Pyramid chart will look as follows:
 
 
Now let us switch to a Funnel chart as in the following:
  1. Chart1.Series[0].ChartType = SeriesChartType.Funnel; 
Now run the application and the Funnel type chart will look as follows:
 
 
The preceding is the 3D Style Funnel chart. Now let us disable the 3D style as in the following:
  1. Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false; 
Now the Funnel chart will look as follows:
 
 
Now from all the preceding explanation we saw how to create and use a Pyramid and Funnel 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