justgage used in layouts without a initial fixed size

[brendanheyu]

Love your work!

When using justgage in a layout that is built in a responsive fashion (http://twitter.github.com/bootstrap/ etc) you inevitably have to place the gauges themselves in divs of no specific size. A responsive layout dictates that the layout will change depending on the platform/device/orientation/screen width - so the div size might be set with a grid layout that calculates a percentage.

Can this be achieved? Can justgage render a chart to a div that has it size calculated as opposed to specifically set?

FF 14, IE9 and Opera 12 are all happy to render an initial gauge that works - however there is no recalculating of the gauge size on resize. Chrome and Safari both have a mental breakdown and render vectors all about the place :)

Older IE's don't seem to render at all. This was just the result of a quick test.

[toorshia]

Hello Brendan, and thank you for your interest in JustGage :)

I will do some more fiddling regarding dynamic resize, will be back as soon as I have something to show. Shouldn't be too much of a hassle, as long as it's achievable with SVG.

[phonovision]

Wouldn't it be enough to set everything to relative positioning and sizing? My SVG-knowledge is very little, so I can't say if that would have side-effects...

[toorshia]

I played around with this a bit. Check it out - http://bit.ly/NCJDpX

The problem is, scaling SVG viewport also scales texts, making them unlegible if you go for small gauges.
I handle this in current version of justGage by keeping initial gaugeWidth / fontSize ratio until minimum of 10px is reached, then fonts stay 10px whatever the size of gauge is. I cannot do this when scaling via viewport, because I cannot exclude texts from scaling.

I've come to conclusion that if I enable dynamic scaling like in the example above, I'd have to give user control over font sizes. Which is ok for someone I guess, but adds complexity to setup of gauges, and definitely takes away from the word "just" in justGage :D

All advices & suggestions on this matter are welcome...

[brendanheyu]

Well - haven't you been busy!

The scaling is great - I'll cross check across all my intended platforms and let you know what I see...

Adding an optional parameter for font size is not such a bad thing, you can always implement an enforced default. I'm trying to refrain from suggesting further features - I swear!

Can't wait to add this to my toolkit! :)

[pgbakker]

I see something similar with version 1.0.1, but my div is fixed size (sort of): there's a parent div that's fixed size, but then a whole bunch of nested divs/span that are stretched through CSS to be as wide and height as the parent div (this structure is auto generated, can't control it)

The result of this structure on JustGage is similar as to what is described in this issue.

I've set up a JSFiddle to show my scenario: http://jsfiddle.net/szEpj/

Note that if I scale up the width of the div, as a certain point the issue goes away. And simalar to the description in this issue, the behavior differs per browser.

Any change in seeing a fix/update to the library for this?

[toorshia]

Hmm...I see. It works well no matter what height you set, it accommodates.
But for width - there is a "breaking" point depending on set height.

I'll investigate this and try to fix it.

Thanks for feedback :)

[toorshia]

People, I've fixed major, embarrassing issue - my math sucks. Turns out I've had bad calculation for keeping aspect ratio of gauge widget depending on possible aspects of canvas element. Further more, I've had one too many "dy" parameters in actual gauge shape parameters calculus. Sheesh.

Checkout updates and please test if you find the time. Thanks.

[pgbakker]

Hi Bojan,

Just tested it in my own environment and the issue seems fixed to me. Great job and tnx for the quick repsonse!

Paul

[maximevalette]

Don't forget to update the file on justGage.com, I just had this issue.

[toorshia]

Added option to enable dynamic resize (responsiveness) of gauges regarding viewport size.

[flyingoctopus]

and how does one enable this option?

[flyingoctopus]

set relativeGaugeSize to true. this should really be documented somewhere. o.O