Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Shashidhar Dasyam
475
Tooltip shown on non-data point areas
posted

I show a custom tooltip when mouse hovering on any data point on my line series. But the tooltip also shown when mouse hover
on the line, where there are no data points; It somehow takes the nearest data point value and display in tooltip window. The worst part is, at some points it shows 'null' as the value. Please let me know if someone has any idea how should I stop this. Thanks.

  • 30692
    Offline posted

    Could you clarify a bit more?

    Note there are actually two styles of tooltips in the chart, the style you get when you set a tooltip on a series, and additionally the type you get when you add the itemTooltipLayer series to the chart. You may want to see if the latter meets your expectations.

    -Graham

  • 20255
    Offline posted

    Hello Shashidhar,

    I am just following up to see if you need further assistance, if so please do not hesitate to contact me again.

  • 20255
    Suggested Answer
    Offline posted

    Hello Shashidhar,

     Thank you for contacting us.

     By design igDataChart behave like that, it is showing the nearest value tooltip. If you want to show tooltip only where the actual value of the series is, you can suggest this as a new product idea for future versions at <http://ideas.infragistics.com>.

    Steps to create your idea:

    1.       Log into the Infragistics Product Ideas site at http://ideas.infragistics.com (creating a new login if needed).
    2.       Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.)
    3.       Add your product idea and be sure to be specific and provide as much detail as possible. Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing!

    The benefits of submitting the product idea yourself include:

    -          Direct communication with our product management team regarding your product idea.
    -          Notifications whenever new information regarding your idea becomes available.

    Additional benefits of the product idea system include:
    -          Ability to vote on your favorite product ideas to let us know which ones are the most important to you.  You will have ten votes for this and can change which ideas you are voting for at any time.
    -          Allow you to shape the future of our products by requesting new controls and products altogether.
    -          You and other developers can discuss existing product ideas with members of our Product Management team.

    The product ideas site allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.

     I have created a sample for you as a workaround. I can suggest you to enable markers and to get the x and y coordinates of this markers in a global array. Handle seriesMouseEnter event and check if the mouse coordinates are in a range of the markers. Please have a look at the sample, I hope you will like it.

     Code snippet:

    1. <script type="text/javascript">
    2.         var pageX = 0, pageY = 0;
    3.         var onlyOnce = 0;
    4.         var coordinates = [];
    5.  
    6.  
    7.         $(document).on("mousemove", function (event) {
    8.             pageX = event.pageX;
    9.             pageY = event.pageY;
    10.         });
    11.  
    12.         Number.prototype.between = function (min, max) {
    13.             return this > min && this < max;
    14.         };

    ................

    1. seriesMouseEnter: function (evt, ui) {
    2.                     var evt = 5;
    3.                     var show = false;
    4.  
    5.                     for (var i = 0; i < coordinates.length; i++) {
    6.                         if (coordinates[i].x.between(pageX - 20, pageX + 20) && coordinates[i].y.between(pageY - 20, pageY + 20)) {
    7.                             show = true;
    8.                             break;
    9.                         } else {
    10.                             show = false;
    11.                         }
    12.                     }
    13.  
    14.                     $("#chart").igDataChart("option", "series",
    15.                         [{
    16.                             showTooltip: show,
    17.                             tooltipTemplate: "tooltipTemplate",
    18.                             name: "2005Population",
    19.                             type: "line",
    20.                             title: "2005",
    21.                             xAxis: "NameAxis",
    22.                             yAxis: "PopulationAxis",
    23.                             valueMemberPath: "Pop2005",
    24.                             isTransitionInEnabled: true,
    25.                             isHighlightingEnabled: true,
    26.                             thickness: 5
    27.                         }]
    28.                     );
    29.                 }

    If there is something else that I could do for you, please do not hesitate to ask me.

    ShowTooltipsAtSpecificCoordinates.zip