Skip to content

Raw Data Table

The Raw Data Table (RDT) is used to display raw, non aggregated data. Its configuration and options differ from the rest of the visuals.

Rendering the RDT

The RDT uses .field() instead of .groupby() and it doesn’t use .metrics()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var fields = [
  cf.Field('eventname','Event Name'),
  cf.Field('venuecity', 'Venue City'),
  cf.Field('catname', 'Category Name'),
  cf.Field('pricepaid', 'Price')
]
cf.provider('Elasticsearch')
  .source('ticket_sales')
  .fields(...fields)
  .graph('Raw Data Table')
  .element('rdt-div')
  .execute()

This will render an RDT like this:

RDT

The first thing to notice here is the fields variable, which is an array of Field objects that exist specifically for the RDT. Each one of these objects has the name of the field and any label we want to display as column header for that field. That’s the main purpose of the Field object.

If we don’t want to use it, we can just pass an array of strings representing the field names or just field by field into the .fields() function like this:

1
2
3
4
5
6
cf.provider('Elasticsearch')
 .source('ticket_sales')
 .fields('eventname','venuecity','catname','pricepaid')
 .graph('Raw Data Table')
 .element('rdt-div')
 .execute()

RDT F

Notice how the column headers changed now to use the field names. If you defined metadata with field labels, those labels will be displayed instead. See the Custom Metadata section to learn how to define field labels.

Get all fields and exclude some

This is a very common case. Bring all fields and exclude a few. To do this we use the .fields() function without parameters, it will understand that if no fields were specified it will retrieve all of them.

The in order to exclude some of those fields, we’ll use the .exclude() function passing the fields we don’t want to query. The parameters will be the names of those fields:

1
2
3
4
5
6
7
cf.provider('Elasticsearch')
 .source('ticket_sales')
 .fields()
 .exclude('sales_id','event_id','user_id')
 .graph('Raw Data Table')
 .element('rdt-div')
 .execute()

Sort by columns

RDT will allow to sort the data by clicking over any column header. It will loop through descending, ascending and alphabetically which is the default.

RDT specific options

The options for the RDT must be specified BEFORE the visualization is rendered, meaning before invoking the .execute() method.

Row number

This options has two purposes. The first one is to display as the first column, the number of the row. This option is only accepted at execution time and won’t have any effect after the RDT is executed.

1
2
3
4
5
6
7
cf.provider('Elasticsearch')
 .source('ticket_sales')
 .fields('eventname','venuecity','catname','pricepaid')
 .set('showRowNumber', true)
 .graph('Raw Data Table')
 .element('rdt-div')
 .execute()

RDT RN

The row loading indicator

The other purpose of the row number is to display a loading indicator for each row in that column when the RDT is requesting data:

RDT LI

This indicator is not provided within ChartFactor, instead ChartFactor will try to load it from ${app_root}/../img/loading.gif by default. We can have that folder in our app structure. If we have a different structure like${app_root}/assests/images/loader.gif, then we need to tell ChartFactor the right path by doing:

1
rdt.set('loader', '/assets/images/loader.gif')

Or, if we don’t have a gif and we want to pull it from an external resource, or use a font like Google fonts or Awesome fonts that provider spinners as DOM elements classes, we can specify the html element that will render the spinner instead:

1
rdt.set('loader', '<img src="http://icons.com/loading/23"/>')

or

1
rdt.set('loader', '<span class="fa fa-spinner black"></span>')

Size columns to fit

This option will make the columns to scale (growing or shrinking) to fit the available width. This is useful when adding more data (new fields for example) after the table has been rendered for the first time. It can be set at execution time or after the table was rendered.

1
rdt.set('sizeColumnsToFit', true)

Auto size columns

This option will make all columns to adjust to the text width. It can be considered as the opposite to sizeColumsToFit, and this means that when one of them is applied will overwrite the effect of the other one.

1
rdt.set('autoSizeColumns', true)