Skip to content

KPI Widget

The KPI Widget is useful when you want to visualize a specific value and the difference of this one against another referential metric.

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();

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

Custom Options

  • mainTextSize, secondaryTextSize, diffTextSize and labelTextSize can be used to configure the font size of the different components 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