Post
Ask Question

Bubble Type Chart in 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] [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]    
  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.


Similar Articles