On responsive/fluid designs

Share RGraph:   Share or Like RGraph on Facebook!

« 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 David Cook on 28th July 2017
Hi Richard:

I saw the post yesterday by another user asking about Responsive canvas using RGraph. You referenced the user to this page on your site:

www.rgraph.net/blog/how-to-get-a-responsive-canvas.html

Our design is also fluid/responsive as well as allowing the user to drag and resize Meter/Gauge/Progress widgits.

While your gauges (etc) all resize nicely, the text, and text value, and positioning of the text (eg., Title, etc) do not.

In your page, you showed recalculating the text-size based on the window size. While this works, and can be applied
to other elements (such as the Value box position), this is not an ideal solution. Calculating the positions and sizes still can cause some element to 'float' inappropriately as the user manipulates the widgit size.

I have, what I think, would be a very simple and elegant solution for a future release.

If you would give us the ability to set the UNIT for things like X/Y position/offset, and Text sizes and positions - it would make responsive/fluid designs much simpler.

As for units... px, vw,vh, % - these are what I mean. In my application, our fluid design is based on 'vw' units - thus text sizes and positions always are proportional, to the window size.

So I could see adding something like "titlePhysicalUnit: 'vw'", etc... which would then be applied within RGraph.

Your current system, I believe, is utilizing 'px' only. (I tried to force values to 'vw', but that seems to break your code).

Just a thought.
Posted by Richard on 28th July 2017
Hi there,

This may work if you use the textAccessible option (the default), but it won't when you use native canvas text.

If you use canvas native text though and then use CSS to resize/shrink/enlarge the canvas the text should resize accordingly.


Richard

Add a reply




« Back to message list