Skip to content

Floating Bubbles

The Floating Bubbles chart is good to visualize aggregated metrics by one or two attributes.

The following code shows how to create a Floating Bubbles Chart:

 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
// Define the metrics to be used
var metrics = [];
var metric = cf.Metric('commission', 'sum');
var metric2 = cf.Metric('qtysold', 'sum');

// define attribute to group by
var groups = [];
var group1 = cf.Attribute('venuecity')
                .limit(10)
                .sort('desc', metric);
var group2 = cf.Attribute('catname')
                .limit(10)
                .sort('desc', metric2);

metrics.push(metric);
metrics.push(metric2);
groups.push(group1);
groups.push(group2);

var myChart = cf.provider('Elasticsearch')
                .source('ticket_sales')
                .groupby(...groups)
                .metrics(...metrics)
                .graph('Floating Bubbles')
                .set('legend', 'right')
                .element('chart')
                .execute();

The previous code will render a Floating Bubbles chart as follows:

FB

Metrics

The Floating Bubbles chart requires two metrics. The first one represents the yAxis and the second one represents the size of the bubbles.

If only one metric is provided, the same metric will be used to represent both the yAxis value and the size of the bubbles.