Dashboard Canvas Layout Absolute and Relative Positioning

This post aims to clarify the behaviour of this canvas property. With the introduction of the Absolute zoom control, there are still some subtle differences between these options that a dashboard author should be aware of.

I will be using these properties to demonstrate the effect of changing these Canvas properties.

I have created a wide and very long dashboard to help illustrate.

The Relative layout makes the dashboard fit to browser width, regardless of the browsers size. For long dashboards, you may get vertical scroll bars. The Fit page option (only available in Relative layout) will make the whole dashboard fit within the available browser window.

The Absolute layout, as of version 11.2.4, enables a zoom control that also has very similar options, including Fit to width and Fit to page.

What’s the difference between Relatives fit to page width and Absolute’s zoom fit to page width , or likewise Relative Fit Page and Absolute’s zoom Fit to page? Both options seem to be just zooming a dashboard to fit on the page?

To illustrate the differences, I will be using a very simple, long dashboard. This dashboard is 1280px wide and 2000px in height.  On the canvas I have placed two rectangles, each 100% in width, and some 72pt font text.

Firstly, lets look at this dashboard with the canvas set to Relative Layout, Fit page:

As fit page is switched on, the entire dashboard fits on the screen.

There are no horizontal or vertical scroll bars.

Still in Relative layout, let’s change the Fit page to off.

The dashboard now fits to the browser width. As the dashboard is very long, we now get a vertical scroll bar.

Even though the dashboard no longer fully fits on the page, the text item stayed the same size.

The dashboard has preserved the authors preference for the text to be 72pt in height, regardless of how much the dashboard has been scaled to fit into the horizontal window. In both screenshots, the text is the same size. On the fit page option, the text wraps over two lines.

Let’s switch the dashboard to Absolute layout and the default zoom Fit to page.

How is this different to Absolute fit to page? Let’s place the two dashboards side by side to see:

On the left is the Absolute fit to page dashboard. On the right is the Relative Fit page dashboard.

Both have no scroll bars, both do indeed fit to page. On both, the blue rectangles appear the same size and the same position.

The key difference is the text size. The relative dashboard is preserving the font size specified by the author. Whilst the absolute zoom, is reducing the entire dashboard to fit on the page. The font is no longer 72pt high. The absolute zoom is very similar to what you would see in something like Word, if you zoomed a document to fit the page to screen.

Let’s compare the fit to width options, that is Relative without the fit page page, and the Absolute zoomed to the page.

Both dashboards now have vertical scroll bars. The Relative dashboard is still preserving the correct font size.

Responsive Charts

Let’s now add a chart onto the dashboard.

The full chart looks like this.

On this chart I have formatted the item axis to be red 48pt font. I have left Responsive on.

This chart has a lot of detail. Again let’s compare the same dashboards with Relative and absolute layouts, both set Fit to page.

The absolute has preserved all the chart contents, but just scaled it down to fit on the page.

Whilst the relative, has respected the charts Responsive setting and removed chart items to fit the chart into the space available, with the aim of still making items legible.

The items it has preserved respect the fonts sized that the dashboard author defined, hence the value axis values are still readable on the Relative dashboard.

This responsive chart property is one of the ‘head-scratchers’ for new dashboard authors. They often find themselves wondering, why are bits of my charts not showing for different users.

Centred Dashboards

Another subtle difference between the Relative and Absolute canvas is the position on the screen.

Relative dashboards are always centered within the browser window. This relative dashboard is fit to page.  It has been centred. Regardless of the browser window size, it will always be centred.

Compare this to the Absolute dashboard. As seen above, at zoom the fit to page setting the dashboard was centered. At the Zoom 100% setting, the dashboard left aligned:

The alignment can vary depending on the zoom setting.

Conclusion

What’s the correct setting for a dashboard? Well, it depends.

Think about the modern web browsing experience. There are some web sites you visit on desktop or mobile, and things are responsive to the device you are using. Fonts are readable regardless of the device. But there are some web sites you visit where things are so small on mobile that you have to zoom – these are non-responsive.

If you want to preserve something exactly as you formatted it. Perhaps you know the exact screen resolutions of all the devices viewing your dashboard – then absolute has some advantages of always preserving chart contents.

If you need to author dashboards for consumption on devices with a range of screen sizes, and you want the content, such as chart axis, to still be legible without zooming, then Relative and Responsive is probably for you.