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:

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" %>
  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>
  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();
  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;
  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();
  23. }
  24. protected void Page_Load(object sender, EventArgs e)
  25. {
  26. if (!IsPostBack)
  27. {
  28. Bindchart();
  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);
  41. DataTable ChartData=ds.Tables[0];
  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];
  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();
  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.