Gauges (Quick Reference)

Owned by Johannes Lindgren (Deactivated)
Last updated: Sept 16, 2024 by Ioana Kocurova
20 min read

Gauges are useful to indicate sizes of fractions, or how well a measurement is performing. Gauges can be created easily with ResultGauge, or with high level of flexibility with Highcharts.

Circular Arc

The Circular Arc Gauge is useful for indicating a fraction.

360 arc

Gauge.groovy

ResultHighchart arcGauge360( String title, String unit, BigDecimal value, BigDecimal minValue, BigDecimal maxValue, String color ) { def chart = api.buildHighchart([ title: [ text: title ], chart : [type: 'solidgauge'], credits : [enabled: false], yAxis : [ min : minValue, max : maxValue, tickPositions: [], lineWidth: 0, ], series : [[ name : title, data : [[ y: value, color: color, ]], tooltip : [valueSuffix: " $unit"], // The value label in the center dataLabels: [ format: """<span style="font-size:24px">{y:.1f} $unit</span>""" ], ]], // Appearance pane : [ background: [ backgroundColor: 'rgba(0,0,0,0.06)', innerRadius : '60%', outerRadius : '100%', shape : 'arc', borderWidth: 0, ] ], // Disable the border around the centered value label plotOptions: [ solidgauge: [ dataLabels: [ borderWidth: 0 ] ] ], ]) chart.addModule('solid-gauge') return chart }

Result Gauge

For building a gauge quick and easy, the ResultGauge class can come in handy.

result gauge

However, the ResultGauge has several disadvantages compared to Highcharts gauges:

  • ResultGauge cannot be used in dashboards.

  • ResultGauge is not very customizable. You can define the value range and colors of the so-called sections.

  • When used in documents – such as Quotes – ResultGauge has a tiny size.

def red = 'rgba(223, 83, 83, 0.22)' def yellow = 'rgba(221, 223, 13, 0.22)' def green = 'rgba(85, 191, 59, 0.22)' def gauge = api.newGauge() gauge.value = value gauge.min = minValue gauge.max = maxValue gauge.addSector(redThreshold, red) gauge.addSector(yellowThreshold, yellow) gauge.addSector(null, green) return gauge

Gauges with Alerts Thresholds

Like alerts, gauges can convey indication of how well something is performing. For example, how much profit is being made from a quote item. In this case, it can be useful to define the sectors according to the alert thresholds:

Gauge.groovy

ResultGauge resultGaugeAlert( BigDecimal value, BigDecimal redLowerBound, BigDecimal redUpperBound, BigDecimal yellowUpperBound ) { def gauge = api.newGauge() def minValue = redLowerBound def maxValue = yellowUpperBound + Math.abs(yellowUpperBound - redLowerBound) as BigDecimal def red = 'rgba(223, 83, 83, 0.22)' def yellow = 'rgba(221, 223, 13, 0.22)' def green = 'rgba(85, 191, 59, 0.22)' gauge.min = minValue gauge.max = maxValue gauge.value = value gauge.addSector(redUpperBound, red) gauge.addSector(yellowUpperBound, yellow) gauge.addSector(null, green) return gauge }

Semi Circular Arc with Gradient Alert Colors

The Semi Circular Arc is used to indicate fractions. To inform end users how well a certain measurement is performing, it gradually shifts color as the value increases/decreases.

Gauge.groovy

Speedometer

Highcharts allow for a large degree of freedom. The example below shows a configuration that results in a speedometer:

Gauge.groovy

Found an issue in documentation? Write to us.

Â