Background

Today we will discuss the Bubble type chart of ASP.Net. We will learn about this chart type control step-by-step. Now let us learn about the properties of the Bubble charts. A Bubble 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 for the chart.
Now let us show the preceding explanation with a practical example by creating a simple web application.
Step 1

Use the following script to create a 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]
  11. GO
Now the design will look as follows:
Now insert the records using the following script:
  1. SET IDENTITY_INSERT [dbo].[orderdet] ON
  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 [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 "UsingBubbleChart" 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="black">
  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">
  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);
  10. DataTable ChartData = ds.Tables[0];
  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];
  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"]);
  23. }
  24. //binding chart control
  25. Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);
  27. //Setting width of line
  28. Chart1.Series[0].BorderWidth = 1;
  29. //setting Chart type
  30. Chart1.Series[0].ChartType = SeriesChartType.Bubble;
  32. //Hide or show chart back GridLines
  33. // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
  34. // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
  36. //Enabled 3D
  37. // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
  38. con.Close();
  40. }
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. }
  34. private void Bindchart()
  35. {
  36. connection();
  37. com = new SqlCommand("GetCharData", con);
  38. com.CommandType = CommandType.StoredProcedure;
  39. SqlDataAdapter da = new SqlDataAdapter(com);
  40. DataSet ds = new DataSet();
  41. da.Fill(ds);
  43. DataTable ChartData = ds.Tables[0];
  45. //storing total rows count to loop on each Record
  46. string[] XPointMember = new string[ChartData.Rows.Count];
  47. int[] YPointMember = new int[ChartData.Rows.Count];
  49. for (int count = 0; count < ChartData.Rows.Count; count++)
  50. {
  51. //storing Values for X axis
  52. XPointMember[count] = ChartData.Rows[count]["Month"].ToString();
  53. //storing values for Y Axis
  54. YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);
  57. }
  58. //binding chart control
  59. Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);
  61. //Setting width of line
  62. Chart1.Series[0].BorderWidth = 1;
  63. //setting Chart type
  64. Chart1.Series[0].ChartType = SeriesChartType.Bubble;
  66. //Hide or show chart back GridLines
  67. // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
  68. // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;
  70. //Enabled 3D
  71. // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
  72. con.Close();
  74. }
  75. }
Now, we have the entire logic to bind the chart from the database, let us run the application. The Bubble Chart will then look as follows:
Now let us hide the Grid Lines 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 Bubble chart will be as follows:
The preceding is the Normal Bubble chart. Now let us enable the 3D style as in the following:
  1. //Enabled 3D
  2. Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Now the 3D style chart will be as:
Let us hide the Grid Line in 3D style 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 Bubble chart will look as follows:
Now from all the preceding explanations we saw how to create and use a Bubble type 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.