Blurry text on mobile

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 dan on 7th January 2014
The graphs, especially the text, seem to be a little blurry while viewed on mobile devices. Is this something that I can correct, or will it be updated/improved in rgraph3?
Posted by Richard on 7th January 2014
Hi there,


If it's a retine display that you're reffering to then the window.devicePixelRatio may be the answer:

web.archive.org/web/20130415082122/http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and


Richard
www.rgraph.net
Please link to the RGraph website. Thanks!
Posted by dan on 7th January 2014
Thanks, I saw that link in another post and when I followed it, the site said it's shutting down and I could not register as a new user. I'll see what I can find regarding window.devicePixelRatio
Posted by Richard on 7th January 2014
Hi there,

That was an archive.org link - you'll need to copy and paste it into your browsers address bar - but it does work.



Richard
www.rgraph.net
Please link to the RGraph website. Thanks!
Posted by dan on 8th January 2014
Ok, I was able to view that link, and I had seen that on Github, but not tried it.

So, when I implemented it, the example worked perfect. When I tried to put in an rgraph, scatter for instance, the canvas would only show the upper left corner of the graph. I used the scatter example on your site and it only shows the y-axis from 1.0 to 0.4 and on the x-axis the first six dividing lines.

I tried two other similar examples with exact same results:
www.html5rocks.com/en/tutorials/canvas/hidpi/
blog.tripleaxis.com/optimising-html5-canvas-elements-for-retina-screens

The device I am using is a Galaxy Note 3, I will attempt on another device if I get the chance. It seems that it is not scaling the graph back to the size of the canvas...

Thanks for your help
Posted by Richard on 8th January 2014
Hi there,

It sounds like it may be scaling it too much. Not used the setting but try gradually increasing the number from 0 to whatever it is. Eg if it's 1.8 - try starting at 1 and slowly increasing it to 1.8.



Richard
www.rgraph.net
Please link to the RGraph website. Thanks!
Posted by dan on 9th January 2014
Yeah, I tried that as well. The image continually gets a little less blurry from 1 to devicepixelratio where it looks great, except for the missing portion of the graph. I thought it may have something to do with the .draw() method...

My reason is, I noticed in the examples, each person used
context.scale(...);
and then
context.drawImage(); or context.fillText(); etc.

whereas, in the rgraph examples it is just
.draw();

Would this make any difference in your opinion?
Posted by Richard on 9th January 2014
Hi there,

Well the .Draw() is an RGraph function - whereas fillText and drawImage are the canvases own functions. RGraph uses the canvases own functions (the canvas API) to draw the charts and the .Draw() function starts it all off.



Richard, RGraph Support
www.rgraph.net
Please link to the RGraph website
Posted by dan on 9th January 2014
Not sure how to manipulate the rgraph draw function to see if that is indeed what is preventing it to scale properly. I'll try a few other things to see if I can get it going or not.

Hopefully I won't need to, but if I can't get this to implement correctly, I may have to consider another charting framework.

Thanks for all your help and suggestions Richard.

Add a reply




« Back to message list