Skip to content

Gauge

The Gauge Widget is useful when you want to visualize a specific value framed within a certain range.

We can obtain a Gauge chart in the following way:

1
2
3
4
5
6
7
8
9
var metric = cf.Metric('commission', 'avg');

var myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .metrics(metric)
                .graph('Gauge')
                .set('ranges', [[0, 120]])
                .element('chart')
                .execute();

The previous code will render a Gauge Widget as follows:

1GAUGE

The Gauge Chart allows visualization of multiple metrics as we can see below in this example of much greater complexity:

 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
32
33
34
35
36
37
38
39
40
41
42
// Define the metrics to be used
var metrics = [];
var metric = cf.Metric('commission', 'avg');
var metric1 = cf.Metric('pricepaid', 'avg');
const countMetric = cf.Metric('count');

let theme = {'font': 'white', 'background': '#3e4953', 'header': '#4e5861', 'rowOdd': '#1b242c', 'rowEven': '#38424a', 'headerFont': '#52c7da'};
let color = cf.Color().theme(theme).palette('intense');

metrics.push(metric);
metrics.push(metric1);
metrics.push(countMetric);

var myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .metrics(...metrics)
                .graph('Gauge')
                .set('ranges', [
                    [0, 200],
                    [0, 800],
                    [0, 1000]
                ])
                .set('radius', ['80%', '40%', '80%'])
                .set('color', color)
                .set('angles', [
                    [180, 0],
                    [225, -45],
                    [180, 0]
                ])
                .set('rangeColors', [
                    [[0.02, 'lime'], [0.5, '#1e90ff'], [0.7, '#ff4500'], [0.8, 'yellow'], [1, 'orange']],
                    [[0.5, 'red'], [1, 'yellow']],
                    [[0.5, 'black'], [1, 'blue']]
                ])
                .set('layout', [
                    ['25%', '80%'],
                    ['50%', '30%'],
                    ['75%', '80%']
                ])
                .set('lineWidth', [5, 13, 20])
                .element('chart')
                .execute();

Previous code will render a Gauge Widget like follow:

GAUGE2

We can use the following properties to configure the Gauge Chart:

  • ranges: allows to define the minimum and maximum ranges for each Gauge, by default [0, 100]
  • radius: allows to define the radius (size) for each Gauge, by default ‘70%’
  • angles: allows defining the start angle and end angle for each Gauge, by default [225, -45] R
  • rangeColors: allows you to define a range of colors for each Gauge that consists of an array of arrays in which each subarray is a color segment whose first element is the percent up to which it arrives and the second is the css color, by default three segments with the first three colors of the color palette of the selected theme.
  • layout: allows you to define the position for each Gauge that consists of an array of arrays in which each subarray has the X and Y position of the center of the Gauge generally in percent, by default for a gauge: [[‘50%, 50%’]] , for two: [[‘25% ‘, ‘50%’], [‘75% ‘, ‘50%’]], for three: [[‘25% ‘, ‘50%’], [‘50% ‘, ‘50%’], [‘75% ‘, ‘50%’]]
  • lineWidth: is an array that allows to define the width of the perimeter line for each Gauge by default: [15]
  • clockwise: is an array that allows you to define if the direction is clockwise for each Gauge by default: [true]
  • splitNumber: is an array that allows to define the number of divisions for each Gauge by default: [10]