On Responsive Architectures & JavaScript Gauges

Handwritten by TVD

Responsive Architecture

Use Responsive Web Design breakpoints and each Gauge’s refresh method to build the right JavaScript Gauge for the right resolution.

We’re Deprecating The AutoResize Feature

Autoresize was written with the best of intentions. It was early 2010. Barely anyone had heard of the term Responsive Web Design (RWD) and we were trying to help an early customer with a “very dynamic website” - as it was described. So we wrote autoresize with the goal to calculate our Gauge’s DOM container and resize accordingly.

It worked for the customer’s specific use case. But we now believe it was a bad approach overall because only the actual developer can 100% know what Gauge size will work for him.

Our Gauge (any component really) can only approximate the best dimensions since the DOM container’s offsetWidth and offsetHeight doesn’t always return the expected results and that’s if those properties even exist for the specific browser - That’s the best case.

Worst case is we, inadvertently, deny our developers the needed control of the end user experience. Either result is no longer acceptable for us.

The Recommendation

Fast forward 3 years later and we’ve made leaps and bounds towards our understanding of RWD. Using the discipline of Responsive Architecture and techniques like Flexible Grids, Flexible Images and CSS3 Media Queries, we can write an application once and it will run in every environment we target.

With RWD, we the Developer, decide which breakpoints - a breakpoint is a value at which a layout adapts - we will design for. Once we decide that, then we design how we want our web application to look for each breakpoint.

Using these techniques, the same app you write for a desktop can run great on a mobile device. The UI will simply look crystal clear at any breakpoint because our JavaScript Gauges are based on vector graphics and are scalable.

Once the UI hits a breakpoint, simply update our Gauge with the width and height that looks best for that breakpoint:

var knots = new Gauge("knots");
. . .
knots.set("width", width);
knots.set("height", height);
. . .
knots.refresh();

Using a Responsive Architecture will set your application up for success - You don’t need autoresize to make that happen. We’ll keep autoresize in for backwards compatibility, for a few releases at least, but we’ll no longer promote it as a feature.

Instead we’ll promote refresh and RWD for best results - Which was the real intent of autoresize, however lofty the goal was. Our Gauge API has outgrown autoresize. Frankly, the web has outgrown autoresize.

Use Responsive Web Design breakpoints and each Gauge’s refresh method to build the right Gauge for the right resolution and Code for the moments that take your breathe away.

discuss on twitter


every day thousands of developers use our charts & gauges to get the job done right

JavaScript Charts JavaScript Gauges JavaScript Flight Gauges


← return to all articles