Skip to content

KPI Widget

The KPI Widget allows users to visualize a specific metric and optionally a comparison metric and the difference between them.

The simplest KPI Widget can be obtained using the following code:

1
2
3
4
5
6
7
var metric = cf.Metric('commission', 'sum');
var myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .metrics(metric)
                .graph('KPI')
                .element('chart')
                .execute();

The previous code will render the following KPI Widget:

KPI

A more advanced example is shown below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// Define the metrics to be used
var metrics = [];
var metric = cf.Metric('commission', 'sum');
const countMetric = cf.Metric('count');

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

let color = cf.Color().theme('dark');

var myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .metrics(...metrics)
                .graph('KPI')
                .set('mainTextSize', 15)
                .set('secondaryTextSize', 15)
                .set('diffTextSize', 7)
                .set('labelTextSize', 3)
                .set('color', color)
                .element('chart')
                .execute();

The previous code will render the following KPI Widget:

KPI V

KPI Colors

You can configure custom colors for the background, primary value, comparison value, labels, up arrow, and down arrow using the theme object as shown in the example below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Define the metrics to be used
    let metrics = [
        cf.Metric('commission', 'sum'),
        cf.Metric('count')
    ]
    let color = cf.Color();

    color.theme({
        background: '#67a967', // KPI background
        primaryValue: '#18510b', // Primary Value
        comparisonValue: '#398439', // Comparison Value
        labels: '#a5b72b', // Labels
        upArrow: '#e9e9e9', // Up arrow
        downArrow: '#000000' // Down arrow
    });

    cf.provider('Elasticsearch')
        .source('ticket_sales')
        .metrics(...metrics)
        .graph('KPI')
        .set('color', color)
        .element('chart')
        .execute();

Color Range Support

The KPI visualization also support color range configuration for its primary value. Refer to the Color Range documentation for details on how to configure color for different ranges.

Additional Options

  • mainTextSize, secondaryTextSize, diffTextSize and labelTextSize can be used to configure the font size of the respective elements of the widget. The unit of measurement is vw (Relative to 1% of the width of the viewport).
  • mainLabel, secondaryLabel and diffLabel can be used to specify custom labels
  • animationSteps can be used to set the number of steps to perform betwens the old numerical value and the new one in the animation
  • animationTickDuration can be used to set the duration in milliseconds betwen every step in the animation
  • showLabels can be used to show or hide the labels on the KPI widget. It is true by default.