How to Slice the Asp Chart Using C#

Introduction :
 Hi, Here i will explain you how to code for Slicing the Chart using Asp.net and C# , In previous Tutorial i have explained How to Create the Charts with Asp.net . By using the post-back value i am making the chart to Slice on the Chart Click. 

Important Steps :

  1. Create the post-back value for Chart Series and assign the value as Index as coded below.
  2. Create the Click event for created chart
  3. Get the post-back value and Explode the chart as code below.
Database Structure :

Aspx code :

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Fourthbottle</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align:center">
<asp:Chart ID="Chart1" Width="293px"  Height="210px" runat="server" onclick="Chart1_Click" >
<Series>
<asp:Series ChartType="Pie" Name="Series1" Legend="Legend1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Area3DStyle-Enable3D="true" Name="ChartArea1">
<Area3DStyle Enable3D="True"></Area3DStyle>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>

C# code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

namespace WebApplication1
{
public partial class Page1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("your connection string ");
con.Open();
SqlDataAdapter da = new SqlDataAdapter("select * from table1", con);
DataSet ds = new DataSet();
da.Fill(ds);
Chart1.DataSource = ds;
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
Chart1.Series["Series1"].Points.AddXY(ds.Tables[0].Rows[i]["Name"], ds.Tables[0].Rows[i]["Attendence"]);
}
Chart1.Series["Series1"].PostBackValue = "#INDEX"; //important
}
//important
protected void Chart1_Click(object sender, ImageMapEventArgs e)
{
int pval = Convert.ToInt32(e.PostBackValue);
Chart1.Series["Series1"].Points[pval]["Exploded"] = "true";
}
}
}

web.config:    Add the below code to your web.config file under <system.websection.

<httpHandlers>
<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />
</httpHandlers>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</controls>
</pages>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</assemblies>
</compilation>
 . . . . . . . 
 . . . . . . 
</system.web>