Post
Ask Question

Polar and Radar Charts in ASP.Net

Background

ASP.Net Chart is a powerful control that creates interactive charts. Today we will discuss the Polar and Radar charts of ASP.Net. So let us start to learn about these chart type controls step-by-step.

Now let us learn about the properties of the Polar and Radar charts. A polar and Radar 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 to 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 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]    
  16.     
  17. GO    
  18. SET ANSI_PADDING OFF    
  19. GO    
  20. SET IDENTITY_INSERT [dbo].[orderdet] ON     
  21.     
  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    
  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 "PolarAndRadar" 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="blue">  
  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="64, 64, 0"   
  16.         BackGradientStyle="LeftRight" Height="370px" Palette="None"   
  17.         PaletteCustomColors="Maroon" Width="370px">  
  18.         <Series>  
  19.             <asp:Series Name="Series1" ChartType="Radar">  
  20.             </asp:Series>  
  21.         </Series>  
  22.         <ChartAreas>  
  23.             <asp:ChartArea Name="ChartArea1" >  
  24.             </asp:ChartArea>  
  25.         </ChartAreas>  
  26.         <BorderSkin BackColor="" PageColor="192, 64, 0" />  
  27.     </asp:Chart>  
  28.   
  29.   
  30.     </form>  
  31. </body>  
  32. </html> 
Step 4
 
Create a method to bind the chart control.
 
Now, 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.      query = "select *from Orderdet";//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.        
  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.      }  
  25.      //binding chart control  
  26.      Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);  
  27.   
  28.      //Setting width of line  
  29.      Chart1.Series[0].BorderWidth = 2;  
  30.      //setting Chart type   
  31.      //  Chart1.Series[0].ChartType = SeriesChartType.Polar ;  
  32.      Chart1.Series[0].ChartType = SeriesChartType.Radar;  
  33.      // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
  34.      //Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
  35.         
  36.      //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
  37.      con.Close();  
  38.   
  39. } 
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.     private void Bindchart()  
  33.     {  
  34.         connection();  
  35.         query = "select *from Orderdet";//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);  
  40.        
  41.         DataTable ChartData=ds.Tables[0];  
  42.   
  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];  
  46.   
  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);  
  56.   
  57.         //Setting width of line  
  58.         Chart1.Series[0].BorderWidth = 2;  
  59.         //setting Chart type   
  60.         //  Chart1.Series[0].ChartType = SeriesChartType.Polar ;  
  61.         Chart1.Series[0].ChartType = SeriesChartType.Radar;  
  62.         // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
  63.         //Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
  64.         
  65.         Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  66.         con.Close();  
  67.     }  
  68. } 
Now, we have the entire logic to bind the chart from the database, let us run the application. The Polar Chart will look as follows:
 
 
The preceding is the Normal Polar chart. Now let us enable the 3D style as in the following:
  1. //Enable 3D  
  2.     Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; 
Now run the application and the Polar 3D chart will look as follows:
 
 
Now let us switch to a Radar chart as in the following:
  1. Chart1.Series[0].ChartType = SeriesChartType.Radar; 
Now run the application. The Radar chart will look such as follows:
 
 
The preceding is the Normal Radar chart. Now let us enable the 3D style as in the following:
  1. //Enable 3D  
  2.     Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true; 
Now run the application. The Radar Chart will look as follows:
 
 
Now change the background style then the chart will look as follows:
 
 
Now from all the preceding explanations we saw how to create and use Polar and Radar charts.

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