Axis Formatting in DVT Gauge
By Duncan Mills on Jan 11, 2012
Further to my last article on gauge style UIs, I though that I'd write up a little more on the core gauge control itself, focusing this time on formatting the axis of the gauge.
In our original example we just used the defaults for the axis which produced a gauge like this (I've removed the reference marker line that I was focusing on last time).
As you can see the default is to draw tick labels and values at the min/max and at the threshold boundaries. This is a pretty good set of defaults, but Hugh on the development team pointed out that there is more flexibility than that, so let's explore the options.
The good stuff here is provided by a couple of child tags to the gauge, <dvt:tickLabel> and <dvt:tickMark> these tags allow you to control the vertical tick marks and the text separately and we'll see an example of that a little later. The key attribute here for both of these tags is the content attribute, this takes one or more string constants as a space or comma separated list so you can combine several options together (see example below). Here are the constants:
|TC_NONE||No label or tick-mark is displayed|
|TC_MIN_MAX||Display label or tick-mark at either end of the gauge|
|TC_METRIC||Display label or tick-mark at the data value|
|TC_THRESHOLD||Display label or tick-mark at each threshold boundary|
|TC_INCREMENTS||Displays labels or tick-marks at regular intervals as defined by the <dvt:tickMark> majorIncrement property. Note that for the label you cannot mix this attribute with the TC_THRESHOLD or TC_METRIC|
Displays labels or tick-marks at min/max and the majorIncrement value - effectively the same as "TC_INCREMENTS TC_MIN_MAX". Note that for the label you cannot mix this attribute with the TC_THRESHOLD or TC_METRIC
We can combine those in different ways, for example to produce this example where we mark the min, max and current values in terms of text but only show a tick-mark at the value (TC_METRIC):
The code for this one is:
<dvt:gauge ....> <dvt:tickLabel content="TC_MIN_MAX TC_METRIC"/> <dvt:tickMark content="TC_METRIC"/> ...
Or this where we show a more regular axis, similar to the one that we produced when emulating the gauge with the horizontalBar chart:
And the code:
<dvt:gauge ....> <dvt:tickLabel content="TC_MAJOR_TICK"/> <dvt:tickMark content="TC_MAJOR_TICK" majorIncrement="30"/> ...
Finally I wanted to explore one more setting within gauge that allows you to combine the thermometer style bar gauge with the LED style gauge. If you're not familiar with the LED style gauge, it's simply a coloured shape in various styles (circular, arrow, triangle or your own custom image) that changes colour to reflect the relationship between the control value and the threshold ranges. These are usually used for traffic light style indications on dashboards.
One of the things that we can do with the STATUSMETER style of gauge that we've been using here is to colour the whole gauge based on where the value is in respect to the threshold values. So a value of 170 on my gauge example will render like this:
And a value of 15 which is down in the red zone will render like this:
The code is extremely simple for this one, just set the useThresholdFillColor attribute to true on the <dvt:gaugePlotArea> tag, another child of <dvt:gauge> and then the correct fill colour will be picked up from your threshold definitions.