Background
ASP.Net Chart is a powerful control for creating interactive charts. Today we will discuss the BoxPlot chart type of ASP.Net. So let us start to learn about this chart type control 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]
  17. GO
  18. SET ANSI_PADDING OFF
  19. GO
  20. SET IDENTITY_INSERT [dbo].[orderdet] ON
  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
  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 "UsingBoxPlotChart" 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" %>
  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="Navy">
  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="192, 64, 0" BackGradientStyle="LeftRight"
  16. BorderlineWidth="0" Height="360px" Palette="None" PaletteCustomColors="128, 64, 0"
  17. Width="380px" BorderlineColor="255, 128, 0">
  18. <Series>
  19. <asp:Series Name="Series1" YValuesPerPoint="12" ChartType="BoxPlot">
  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. //Setting width of line
  23. Chart1.Series[0].BorderWidth = 10;
  24. //setting Chart type
  25. Chart1.Series[0].ChartType = SeriesChartType.BoxPlot;
  26. //Hide or show chart back GridLines
  27. // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
  28. // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
  29. //Enabled 3D
  30. // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
  31. con.Close();
  32. }
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. com = new SqlCommand("GetCharData", con);
  36. com.CommandType = CommandType.StoredProcedure;
  37. SqlDataAdapter da = new SqlDataAdapter(com);
  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]["Month"].ToString();
  51. //storing values for Y Axis
  52. YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);
  53. }
  54. //binding chart control
  55. Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);
  57. //Setting width of line
  58. Chart1.Series[0].BorderWidth = 10;
  59. //setting Chart type
  60. Chart1.Series[0].ChartType = SeriesChartType.BoxPlot;
  62. //Hide or show chart back GridLines
  63. // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
  64. // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
  66. //Enabled 3D
  67. // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
  68. con.Close();
  70. }
  71. }
Now, we have the entire logic to bind the chart from the database, let us run the application. The BoxPlot 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 BoxPlot 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 hide the GridLines in 3D Style Mode as:
  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 BoxPlot Chart will look as follows::
Now from all the preceding explanations we saw how to create and use a BoxPlot 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.