[SOLVED] Solution for SVG Chart Tooltips for all platforms

I have created a dynamic SVG Temperature Chart and the boss wants tootips :frowning:

CSS hover works fine on a desktop but fails miserably using mobiles and tablets. The latter is expected to be the larger market.

I have extensively searched without success and tried numerous solutions. One solution I did find was HighCharts which costs 390 USD for a single license.

Hers is a DEMO showing the CSS version

Rather than hover you want to try and map the cursor position to the nearest bar.
Get the x position relative to the chart canvas and then you should be able to do some math to figure out which bar is the closest.

Once you get it working with mousemove you just need to add a small amount of code for touchmove support.

1 Like

I eventually managed to get the mouseover(…) and mouseout(…) working but unable to get the tooltip in the correct position.

<svg>
...
...
  <g transform="translate(50,50)" font-size="25">
    <rect id="tRct" x="25%" y="20" width="20em" height="3.2em" fill="#fff"/>
    <text id="tTip" x="27%" y="50">Date to go here</text>
    <text id="tBox" x="27%" y="80">Temperature to go here</text>
  </g>
</svg>

I do not understand the DOM values and how to pass the x and y co-ordinates to the following SVG tooltip rect box.

<script type="text/javascript">
function mouseOver(date,xPos, yPos) {
  document.getElementById("tTip").style.fill = "red";
  document.getElementById("tTip").innerHTML = date;
  xy = 'Point: ' + xPos + ' x ' + yPos;
  document.getElementById("tBox").innerHTML = xy;
}
function mouseOut() {
  document.getElementById("ttip").innerHTML   = '';  
  document.getElementById("ttip").style.color = "black";
}
</script>

Complete SVG-Chart can be seen HERE including source code which may be copied and pasted locally.

Edit:
Amended link because having problems with CDN Cloud-Hosting not recognizing changes, Please accept my apologies, should be OK now

Hi John Betong

if your css version page works correctly

then you can simply change your hover to click with jquery for mobile and desktop version.

you can simply use media query to hide the hover effect on mobiles and tablets

and then use jquery click function to show tooltip

vineet

1 Like

also this svg chart link is getting redirected to jokes page daddy-how-did-i-come-into-this-world

vineet

2 Likes

I made some small changes and the CDN Cloud-Hosting could not find the amended web-page. I have renamed the web-page and link. It should be OK now:

Amended Link

1 Like

My knowledge of JQuery is severely limited and if you provide further details with sample script I will compare to using mouseover().

@markbrown4 recommended using mouseover() which I managed to do in less than a dozen lines of script. I prefer not to use jQuery because the majority of users will be using mobiles and jQuery is slow.

<ot>

FF does not handle JS very well so jQuery clogs my desktop PC several times a day.

</ot>

1 Like

i also have limited jquery knowledge.

But According to me jquery gets slow if you use mutliple plugins and libraries.
otherwise if you use just one or two functions of jquery then its not slow.

vineet

+1
But seriously, loading Jquery just to show a tooltip?

2 Likes

Other than the size of the library, don’t be so quick to blame jQuery as the reason for problems.

From the limited times I’ve investigated problems it isn’t the language so much as it is using the language poorly.

Most often (albeit a very small data set) the problem was the creation of objects that resulted in memory leaks because they were not getting removed by garbage collection.

To get on-topic.

This may no longer be the case but several years ago while working with position I discovered that different browsers used different property names and calculated the values differently.
I’m guessing part of the issue was because of “box model” differences that existed at that time.
If so, perhaps “offset” has now become standardized?

2 Likes

I have just updated the tooltip demo web-pages and tested with a desktop mouse, iPad Mini and an Android Moto G. I am delighted to say the tooltips work on all three operating systems.

@vinpkl supplied a jQuery version which I altered slightly to remove the hard-coded SVG bar chart lines and replaced with a PHP loop.

@markbrown4, The IOS mouseover() version seem to work fine without using “touchmove”?

ToolTip Demos

Source code included on both mouseover() and @vinpkl’s jQuery version.

@Mittineague, as far as PingDom’s page-loading test is concerned, both versions are very fast at loading:

mouseover: 65 ms to load 4.8 kB

jQuery: 105 mS to load 38.4 kB

2 Likes

Looks good to me John, kudos for getting it working on your own.

The solution I was proposing uses the x pos of mousemove to find the nearest column, this way you can highlight a column by being near it or above it, not being directly on it. That’s how Highcharts does it. But that’s all more complicated than your solution using mouseover.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.