Add OnClick event on ASP.Net Chart Area using C# and VB.Net

Last Reply 29 days ago By pandeyism

Posted 29 days ago

Hi Team,

I have refer below example to create the chart control in asp.net.

Create ASP.Net Chart Control from Database using C# and VB.Net Example

i want add onclick event after the click on chart area. Please suggest

Posted 29 days ago

Hi Amol111,

Refer below sample.

HTML

<asp:Chart ID="Chart1" runat="server" Height="300px" Width="400px" EnableViewState="true" OnClick="Chart1_Click">
    <Titles>
        <asp:Title ShadowOffset="3" Name="Items" />
    </Titles>
    <Legends>
        <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default"
            LegendStyle="Row" />
    </Legends>
    <Series>
        <asp:Series Name="Default" />
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1" BorderWidth="0" />
    </ChartAreas>
</asp:Chart>

Namespaces

C#

using System.Web.UI.DataVisualization.Charting;
using System.Data;

VB.Net

Imports System.Web.UI.DataVisualization.Charting
Imports System.Data

Code

c#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("shipcity");
        dt.Columns.Add("count");
        dt.Rows.Add("India", 3);
        dt.Rows.Add("USA", 5);
        dt.Rows.Add("Germany", 7);
        string[] x = new string[dt.Rows.Count];
        int[] y = new int[dt.Rows.Count];
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            x[i] = dt.Rows[i][0].ToString();
            y[i] = Convert.ToInt32(dt.Rows[i][1]);
        }
        Chart1.Series[0].Points.DataBindXY(x, y);
        Chart1.Series[0].ChartType = SeriesChartType.Pie;
        Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
        Chart1.Legends[0].Enabled = true;
        Chart1.Series[0].PostBackValue = "#VALX";
    }
}

protected void Chart1_Click(object sender, ImageMapEventArgs e)
{
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('" + e.PostBackValue + "')", true);
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.Add("shipcity")
        dt.Columns.Add("count")
        dt.Rows.Add("India", 3)
        dt.Rows.Add("USA", 5)
        dt.Rows.Add("Germany", 7)
        Dim x As String() = New String(dt.Rows.Count - 1) {}
        Dim y As Integer() = New Integer(dt.Rows.Count - 1) {}
        For i As Integer = 0 To dt.Rows.Count - 1
            x(i) = dt.Rows(i)(0).ToString()
            y(i) = Convert.ToInt32(dt.Rows(i)(1))
        Next
        Chart1.Series(0).Points.DataBindXY(x, y)
        Chart1.Series(0).ChartType = SeriesChartType.Pie
        Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = True
        Chart1.Legends(0).Enabled = True
        Chart1.Series(0).PostBackValue = "#VALX"
    End If
End Sub

Protected Sub Chart1_Click(ByVal sender As Object, ByVal e As ImageMapEventArgs)
    ClientScript.RegisterClientScriptBlock(Me.GetType(), "", "alert('" & e.PostBackValue & "')", True)
End Sub

Screenshot