ASP.NET chart X axis label clickable

Question

How to make ASP.NET chart's X-axis label clickable and trigger a function?

Answer 1

depends on the tool used to create the chart. server based charts typically just return a image, so you will need to determine the bounding box of the label. if you make the chart a submit button image, the browser will post the x and y coordinates.

if its a client based chart, then there is typically a api.

Answer 2

Hi @Hema Ramachandran ,
What's your chart? Asp.net chart control or other third party chart? You could use jquery to get the label to trigger or use OnPrePaint event. However, we need to depends on your chart and the code. Could you share your codes to us?

Best regards,
Yijing Sun

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

How to make ASP.NET chart's X-axis label clickable and trigger a function?

The ASP.NET Chart renders an image (png by default) using the html img tag as follows:

<img id="Chart1"  
  src="/ChartImg.axd?i=chart_0_0.png&g=6d177535e0d24eb8b9a60872279889e8"  
  alt=""  
  style="height:300px;width:600px;border-width:0px;" />  

Although the image itself is not interactive you will probably be able to make the chart interactive. See the following Chart sample provided by Microsoft:

The source code shown in the "C# Source" tab is as follows:

/// <summary>  
/// Page Load event handler.  
/// </summary>  
protected void Page_Load(object sender, System.EventArgs e)  
{  
    this.Chart1.Click += new ImageMapEventHandler(Chart1_Click);  
      
    // direct using of PostBackValue  
    foreach (Series series in this.Chart1.Series)  
    {  
        series.PostBackValue = "series:" + series.Name + ",#INDEX";  
    }  
      
    // transfer of click coordinates. getCoordinates is a javascript function.  
    string postbackScript = ClientScript.GetPostBackEventReference(this.Chart1, "chart:@");  
    this.Chart1.Attributes["onclick"] = postbackScript.Replace("@'", "' + getCoordinates(event)");  
  
}  
  
  
/// <summary>  
/// Handles the Click event of the Chart1 control.  
/// </summary>  
/// <param name="sender">The source of the event.</param>  
/// <param name="e">The <see cref="System.Web.UI.WebControls.ImageMapEventArgs"/> instance containing the event data.</param>  
protected void Chart1_Click(object sender, ImageMapEventArgs e)  
{  
    this.Chart1.Titles["ClickedElement"].Text = "Nothing";  
  
    string[] input = e.PostBackValue.Split(':');  
    if (input.Length == 2)  
    {  
        string[] seriesData = input[1].Split(',');  
        if (input[0].Equals("series"))  
        {  
            this.Chart1.Titles["ClickedElement"].Text = "Last Clicked Element: " + seriesData[0] + " - Data Point #" + seriesData[1];  
        }  
        else if (input[0].Equals("chart"))  
        {  
            // hit test of X and Y click point  
            HitTestResult hitTestResult = this.Chart1.HitTest(Int32.Parse(seriesData[0]), Int32.Parse(seriesData[1]));  
            if (hitTestResult != null)  
            {  
                this.Chart1.Titles["ClickedElement"].Text = "Last Clicked Element: " + hitTestResult.ChartElementType.ToString();  
            }  
        }  
    }  
}  

Answer 4

Hi @Hema Ramachandran ,
You could follow the code as @SurferOnWww say.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)  
        Me.Chart1.C lick += New ImageMapEventHandler(AddressOf Chart1_Click)  
  
        For Each series As Series In Me.Chart1.Series  
            series.PostBackValue = "series:" & series.Name & ",#INDEX"  
        Next  
  
        Dim postbackScript As String = ClientScript.GetPostBackEventReference(Me.Chart1, "chart:@")  
        Me.Chart1.Attributes("o nclick") = postbackScript.Replace("@'", "' + getCoordinates(event)")  
    End Sub  
  
    Protected Sub Chart1_Click(ByVal sender As Object, ByVal e As ImageMapEventArgs)  
        Me.Chart1.Titles("ClickedElement").Text = "Nothing"  
        Dim input As String() = e.PostBackValue.Split(":"c)  
  
        If input.Length = 2 Then  
            Dim seriesData As String() = input(1).Split(","c)  
  
            If input(0).Equals("series") Then  
                Me.Chart1.Titles("ClickedElement").Text = "Last Clicked Element: " & seriesData(0) & " - Data Point #" & seriesData(1)  
            ElseIf input(0).Equals("chart") Then  
                Dim hitTestResult As HitTestResult = Me.Chart1.HitTest(Int32.Parse(seriesData(0)), Int32.Parse(seriesData(1)))  
                If hitTestResult IsNot Nothing Then  
                    Me.Chart1.Titles("ClickedElement").Text = "Last Clicked Element: " & hitTestResult.ChartElementType.ToString()  
                End If  
            End If  
        End If  
    End Sub  

Best regards,
Yijing Sun

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.