Tooltips don't work in Chrome on retina display mac book pro

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by John Allwine on 24th April 2013
I'm trying to get RGraph to look and behave right in chrome on my mac pro pro retina display. By default, the canvas is blurry. To address that problem I followed the advice here: www.html5rocks.com/en/tutorials/canvas/hidpi/

It involves scaling up the canvas's width and height and then displaying it at its original width and height using css. After implementing this, the graph looks sharp, but tooltips fail to work in chrome. It seems to work in safari because the canvas backing store is automatically scaled up, so there isn't any need to scale it down with css.

  I modified the pie-tooltips.html example below. Tooltips don't work in chrome with this example:

         window.onload = function ()
         {
             var canvas = document.getElementById("cvs");
             var context = canvas.getContext("2d");

             // finally query the various pixel ratios
             var devicePixelRatio = window.devicePixelRatio || 1;
             var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                                 context.mozBackingStorePixelRatio ||
                                 context.msBackingStorePixelRatio ||
                                 context.oBackingStorePixelRatio ||
                                 context.backingStorePixelRatio || 1;

             var ratio = devicePixelRatio / backingStoreRatio;

             // upscale the canvas if the two ratios don't match
             if (devicePixelRatio !== backingStoreRatio) {
                 var oldWidth = canvas.width;
                 var oldHeight = canvas.height;

                 canvas.width = oldWidth * ratio;
                 canvas.height = oldHeight * ratio;

                 canvas.style.width = oldWidth + 'px';
                 canvas.style.height = oldHeight + 'px';

                 // this line scales everything up, causing only a quarter of the graph to be shown.
                 //context.scale(ratio,ratio);
             }

             var pie = new RGraph.Pie('cvs', [4,8,4,6,5,3,2,5]);
             pie.Set('chart.labels', ['Alvin','Pete','Hoolio','Jack','Kev','Luis','Lou','Pete']);
             pie.Set('chart.shadow', true);
             pie.Set('chart.shadow.offsetx', 0);
             pie.Set('chart.shadow.offsety', 0);
             pie.Set('chart.shadow.blur', 15);
             pie.Set('chart.strokestyle', 'transparent');
             pie.Set('chart.exploded', [15,15]);
             pie.Set('chart.tooltips', ['Alvin','Pete','Hoolio','Jack','Kev','Luis','Lou','Pete']);
             pie.Draw();
         }
Posted by RGraph support on 24th April 2013
Hi there,

The only information that I have on this is a link to this page:

joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

But not having a Mac to test with I have no idea how it affects tooltips and other dynamic features.



Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by John Allwine on 24th April 2013
I'm guessing you can test it by explicitly changing devicePixelRatio = 2 and backingStoreRatio = 1 in the example above. I think the problem arrises from a different css width and height than the canvas width and height.

Add a reply




« Back to message list