Bubble Type Chart in ASP.Net

In this article we will learn about the Bubble Type Chart of ASP.Net.

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] [intNULL,    
  5.  CONSTRAINT [PK_Order TablePRIMARY 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 = ONON [PRIMARY]    
  9. ON [PRIMARY]    
  10.     
  11. GO   
Now the design will look as follows:
 
 
Now insert the records using the following script:
  1. SET IDENTITY_INSERT [dbo].[orderdet] ON             
  2.             
  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            
  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 "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" %>    
  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="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);    
  9.     
  10.         DataTable ChartData = ds.Tables[0];    
  11.     
  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];    
  15.     
  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"]);    
  22.     
  23.         }    
  24.         //binding chart control    
  25.         Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);    
  26.     
  27.         //Setting width of line    
  28.         Chart1.Series[0].BorderWidth = 1;    
  29.         //setting Chart type     
  30.          Chart1.Series[0].ChartType = SeriesChartType.Bubble;    
  31.          
  32.         //Hide or show chart back GridLines    
  33.   // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;    
  34.   // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;    
  35.     
  36.         //Enabled 3D    
  37.       // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;    
  38.         con.Close();    
  39.     
  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();          
  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.     
  33.     
  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);    
  42.     
  43.         DataTable ChartData = ds.Tables[0];    
  44.     
  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];    
  48.     
  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"]);    
  55.     
  56.     
  57.         }    
  58.         //binding chart control    
  59.         Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);    
  60.     
  61.         //Setting width of line    
  62.         Chart1.Series[0].BorderWidth = 1;    
  63.         //setting Chart type     
  64.          Chart1.Series[0].ChartType = SeriesChartType.Bubble;    
  65.          
  66.         //Hide or show chart back GridLines    
  67.   // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;    
  68.   // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;    
  69.     
  70.         //Enabled 3D    
  71.       // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;    
  72.         con.Close();    
  73.     
  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.