Axis Formatting in DVT Gauge

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).

Defaul Gauge Axis

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 
TC_MAJOR_TICK

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):

gauge with just the metric tick

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:

Gauge with regular increments

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:

usethresholdColor green gauge

And a value of 15 which is down in the red zone will render like this:

useThresholdFillColor red gauge

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.

Happy gauge-ing! 

Comments:

Hi Duncan,
Thanks for the excellent information. But few weeks earlier I faced an issue with the max value which is getting clipped if the value is more than 3 digits long.
my gauge code was :
<dvt:gauge id="gauge0111" gaugeType="STATUSMETER"
value="500"
maxValue="5000"
minValue="0" imageWidth="350"
inlineStyle="width:400px; height:100px;">
<dvt:gaugeBackground>
<dvt:specialEffects/>
</dvt:gaugeBackground>
<dvt:thresholdSet>
<dvt:threshold thresholdMaxValue="0.0" id="tmv0111"/>
<dvt:threshold thresholdMaxValue="3000.0"
id="tmv1111" fillColor="#52ffad"/>
<dvt:threshold thresholdMaxValue="4000.0"
id="tmv1111" fillColor="#52ffad"/>
<dvt:threshold id="tmv2111" fillColor="#ff8400"/>
</dvt:thresholdSet>
<dvt:indicatorBar/>
<dvt:gaugePlotArea/>
<dvt:tickLabel content="TC_THRESHOLD " scaling="none" autoPrecision="off">
</dvt:tickLabel>
<dvt:tickMark/>
<dvt:upperLabelFrame/>
<dvt:topLabel/>
<dvt:lowerLabelFrame/>
<dvt:bottomLabel text="2001-12-31 &lt; > 2010-12-31"
position="LP_INSIDE_GAUGE">
<dvt:gaugeFont size="11"/>
</dvt:bottomLabel>
<dvt:metricLabel position="LP_INSIDE_GAUGE">
<dvt:numberFormat scaleFactor="SCALEFACTOR_NONE"/>
<dvt:gaugeFont size="12"/>
</dvt:metricLabel>
</dvt:gauge>

I saw with tickLabel content="TC_MIN_MAX", I can stop the clipping problem. But if I have to show the thresholds I cannot get rid of the clipping issue. I tried all possible options(posting in forum, creating a bug) nothing helped.
So I was wondering if you have ever faced an issue like this with gauges. Thanks - Soham

Posted by Soham on January 12, 2012 at 02:30 AM GMT #

Hi Duncan,
Thanks for the excellent information. But few weeks earlier I faced an issue with the max value which is getting clipped if the value is more than 3 digits long.
few important snippets of my gauge code was :
gaugeType="STATUSMETER"
value="500"
maxValue="5000"
minValue="0" imageWidth="350"
inlineStyle="width:400px; height:100px;"
....
....
I have 3 thresholds 0, 3000, 4000
with tickLabel content="TC_THRESHOLD "

I saw with tickLabel content="TC_MIN_MAX", I can stop the clipping problem. But if I have to show the thresholds I cannot get rid of the clipping issue. I tried all possible options(posting in forum, creating a bug) nothing helped.
So I was wondering if you have ever faced an issue like this with gauges. Thanks - Soham

Posted by guest on January 12, 2012 at 02:54 AM GMT #

Post a Comment:
Comments are closed for this entry.
About

Hawaii, Yes! Duncan has been around Oracle technology way too long but occasionally has interesting things to say. He works in the Development Tools Division at Oracle, but you guessed that right? In his spare time he contributes to the Hudson CI Server Project at Eclipse
Follow DuncanMills on Twitter

Note that comments on this blog are moderated so (1) There may be a delay before it gets published (2) I reserve the right to ignore silly questions and comment spam is not tolerated - it gets deleted so don't even bother, we all have better things to do with our lives.
However, don't be put off, I want to hear what you have to say!

Search

Archives
« July 2015
MonTueWedThuFriSatSun
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  
       
Today