Vertical Measurement/Gauge

HI all,
I am experimenting the Vaadin Charts official add-on but I lack one important feature vertical gauges grapphics like the ones I am posting :

The ideia would to have a vetical gauge for several properties ( temperature, power, etç, each displaying the minmum, maximum and a gauge with the current value.

Has anyone did this in the past ? If so , please can somebody tell me how ?

Ivan Frias

I think you should be able to get that by using a column chart with some custom axis settings to customize the tick and minor tick marks. To have the floating indicator outside the column, you could perhaps use a
mixed chart
with the column chart and a scatter chart to display the indicator. Plus some background color settings.

Thanks Marko, that’s one way of doing it. what about the same graphic but with “relative minimum” and “relative maximum” ? Basically instead of one indicador I’d like to have two indicators. Also ( if possible ) i’d like to color the column with diferent colours ( e.g. : below relative minimum, columns should be gree, between rel. minimum and rel. maximum, should be yellow and above rel. maximum it should be red.

Any ideas ?

Ivan Frias

So, you could have separate data series for the two indicator types, one for minimum and another for maximum. Positioning those indicators horizontally at the right side of the column might be a bit tricky.

The simplest way to get the color bands would be to use GradientColor with multiple thresholds for the columns, but I’m not sure if that works. If not, you could make it a stacked column chart, although then you need to play a bit with the stacked parts of columns in multiple series.

Styling charts is not documented very well at the moment and there’s practically no examples, so I might look how to do those things. Hmm.

A non-chart driven approach is to use Henri Muurimaa’s excellent Canvas add-on to draw your graphic components and drive the various elements with your data. That gives you total control of all aspects of size, shape, colour and most importantly function. Make a gauge, bundle it up as a CustomComponent and place it where you want. The attached fuel gauges are horizontal, but they could just as easily be vertical. Or diagonal…


I experimented a bit with Charts styling and managed to get
rather what
your gauge there looks like. If you want columns that have gradient in the cross direction, like in the column there, you’d need to use column stacking to get the red/yellow bands in the other direction.

Placing the indicator with coordinates is a bit pain, as you have to use relative instead of pixel coordinates. Chart’s automatic axis ranges also cause some trouble.