Post
Ask Question

Bind 3D Chart In ASP.NET Using C#

We take a chart between name and age and bind that data to our chart control.

Initial chamber

Step 1: Open Visual Studio 2010 and create an empty Website. Give a suitable name [ChartControl_demo].

Step 2: In Solution Explorer you get your empty website, Add a web form and SQL Database. By going like this –

For Web Form:

ChartControl_demo (Your Empty Website) - Right Click, Add New Item, then Web Form and name it ChartControl_demo.aspx.

For SQL Server Database:

ChartControl_demo (Your Empty Website) - Right Click, Add New Item, SQL Server Database and add Database inside the App_Data_folder.

Database chamber

Step 3: In Server Explorer, click on your database [Database.mdf] - Tables, Add New Table and make table like the following:

Table - tbl_age [Don’t Forget to make ID as IS Identity -- True].

table design

Show table data:

table

Design chamber

Step 4: Open ChartControl_demo.aspx file from the Solution Explorer and start designing your Application:

Here is the Code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>  
  2.   
  3. <%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title></title>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.     <div>  
  14.         <asp:Chart ID="Chart1" runat="server" Palette="None" AntiAliasing="Graphics" Width="563px">  
  15.             <Series>  
  16.            <%--  <asp:Series ChartArea="ChartArea1" IsValueShownAsLabel="True" Name="Series1">  
  17.                 </asp:Series>--%>  
  18.             </Series>  
  19.             <ChartAreas>  
  20.                 <asp:ChartArea Name="ChartArea1">  
  21.   
  22.                     <AxisX Title ="name"></AxisX>  
  23.                     <AxisY Title ="age"></AxisY>  
  24.   
  25.                    <Area3DStyle Enable3D="true" LightStyle="Realistic" />  
  26.   
  27.   
  28.   
  29.                 </asp:ChartArea>  
  30.                   
  31.             </ChartAreas>  
  32.         </asp:Chart>  
  33.     </div>  
  34.         <p>  
  35.             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Load Chart " />  
  36.         </p>  
  37.     </form>  
  38. </body>  
  39. </html>  
Code chamber

At last open your ChartControl_demo.aspx.cs file to write the code for making the 3D Chart like we assumed.

Here is the code:

Add these Namespaces:

namespace
  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.Web.UI.DataVisualization.Charting;  
  8. using System.Data.SqlClient;  
  9. using System.Data;  
  10.   
  11. public partial class Default2 : System.Web.UI.Page  
  12. {  
  13.     protected void Page_Load(object sender, EventArgs e)  
  14.     {  
  15.   
  16.     }  
  17.   
  18.     protected void Button1_Click(object sender, EventArgs e)  
  19.     {  
  20.         SqlConnection con = new SqlConnection(@"Data Source=NiluNilesh;Initial Catalog=mynewdata;Integrated Security=True");  
  21.         con.Open();  
  22.         SqlCommand cmd = new SqlCommand("select name, age from tbl_age", con);  
  23.   
  24.         SqlDataReader sdr = cmd.ExecuteReader();  
  25.         Chart1.DataBindTable(sdr, "name");  
  26.   
  27.     }  
  28. }  
Output chamber

Output

Hope you like it. Thank you for Reading. Have a good Day.

 


Similar Articles