Gauge

The Gauge chart is useful to visualize a specific KPI value framed within a certain range.

We can obtain a Gauge chart in the following way:

var metric = cf.Metric('commission', 'avg');

var myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .metrics(metric)
                .graph('Gauge')
                .set('ranges', [[0, 120]])
                .set("label", {
                    "borderColor": "grey",
                    "borderWidth": 2
                })
                .element('chart')
                .execute();

The previous code will render a Gauge chart as follows:

The Gauge chart also allows the visualization of multiple KPIs as we can see below in this example of much greater complexity:

// 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 chart as follow:

Gauge configuration

The Gauge supports multiple settings to change its rendering behavior. The following are the supported settings:

angles

Allows defining the start angle and end angle for each Gauge, by default [225, -45]

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%’

rangeColors

Allows 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

It is an array that allows to define the width of the perimeter line for each Gauge by default: [15]

clockwise

It is an array that allows you to define if the direction is clockwise for each Gauge by default: [true]

splitNumber

It is an array that allows to define the number of divisions for each Gauge by default: [10]

showLabel

Allows to define if metric labels, also referred in this documentation as "title labels" are rendered or not, by default true

titleLabel

• textBorderColor: is a string that allows to change the border color around the title text.
• textBorderWidth: is an integer that allows to change the width of the border around the title text.
• fontSize: is an integer that allows to change the font size of the title text.

scaleLabel

• textBorderColor: is a string that allows to change the border color around the scale labels.
• textBorderWidth: is an integer that allows to change the width of the border around the scale labels.
• fontSize: is an integer that allows to change the font size of the scale text.

detailLabel

• textBorderColor: is a string that allows to change the border color around the detail text.
• textBorderWidth: is an integer that allows to change the width of the border around the detail text.
• fontSize: is an integer that allows to change the font size of the detail text.

needle

• borderColor: is a string that allows to change the border color around the needle.
• borderWidth: is an integer that allows to change the width of the border around needle.
• opacity: is an integer that allows to change the opacity of the needle. The value has to be a number between 0 and 1.