jQuery UI Widgets Forums Chart Chart Events for Axis Text

This topic contains 2 replies, has 2 voices, and was last updated by  VanCleef 10 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Chart Events for Axis Text #30834

    VanCleef
    Participant

    Hello,

    Is it possible to create a mouseOver event for the axis text of a chart? I would like to underline axis text when I move my cursor over it.

    I know that it is possible to create events for the series, as shown in the event sample on your website, but this is not what I am looking for.

    Regards,

    VanCleef

    Chart Events for Axis Text #30862

    Dimitar
    Participant

    Hello VanCleef,

    To achieve this, bind to the mouseenter and mouseleave events as follows:

    $(".jqx-chart-axis-text").mouseenter(function (event) {
    $(event.target).css("text-decoration", "underline");
    });
    $(".jqx-chart-axis-text").mouseleave(function (event) {
    $(event.target).css("text-decoration", "none");
    });

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Chart Events for Axis Text #30896

    VanCleef
    Participant

    Hello Dimitar,

    Thank you for your help, this is what I needed. I forgot to mention that I only had to underline the chart axis text on the x-axis. While looking through the stylesheet I noticed that both the x-axis and y-axis use the same identifier (.jqx-chart-axis-text). After a bit of trial and error I managed to find a solution. I would like to post the code here, in case somebody else is having the same problem.

    function mouseOverEvent()
    {
    $(".jqx-chart-axis-text").each(function()
    {
    var data = $(this).text();
    if (isNaN(data))
    {
    $(this).mouseenter(function(event)
    {
    $(event.target).css("text-decoration", "underline");
    });
    $(this).mouseleave(function(event)
    {
    $(event.target).css("text-decoration", "none");
    });
    }
    });
    };

    This code is triggered when the pointer moves over the chart. The code checks if the axis-text contains a number, if it doesn’t then the text will be underlined when the pointer moves over the text.

    Ofcourse if there happens to be a proper solution to seperate the x-axis and y-axis then please let me know.

    Regards,

    VanCleef

    • This reply was modified 10 years, 6 months ago by  VanCleef.
    • This reply was modified 10 years, 6 months ago by  VanCleef. Reason: Bad code formatting
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.