Skip to content

Floating Bubbles

The Floating Bubbles visualization is good when you need to aggregate metrics by two attributes.

The following code shows how to create a simple Floating Bubble 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