Gauges (Quick Reference)

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.

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.

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: