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 back"></span>')

Formatting cells

The main purpouse of the RDT is to show raw data as it is stored in the data engine. However, we can still format the values and apply styles to them for a better visualization. The formatting is applied then at render time with the option cellFormat.

1
2
3
4
5
6
let formatter = {
  fields: // ... The fields to format
  format: // A function with the formatting rules
}

rdt.set('cellFormat', formatter);

In the object we have two properties, the first one is fields. This property accept the following values:

1
2
3
4
5
6
7
8
// An array of field names
fields: ['field_name_1', 'field_name_2'],

// A field type to affect all fields for that specific type
fields: 'INTEGER', // PERCENT, TIME, ....

// The word ALL, to affect all fields
fields: 'ALL'

The property format, must be a function that takes two parameters: the field name and the value. The function will be applied over each cell of each column if this one matches the fields property criteria.

The function must return an object with any (or both) of this two properties depending on what we need: value and style. The first one is the new value for the cell and the second one is an object with css properties.

For example, let's say that for a given field we want to display them in different colors depending on their values:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
let formatter = {
  fields: ['my_numeric_field'],
  format: function(field, value) {

    // Negative numbers will be displayed in red and bold:
    if (value < 0) return { style: { color: 'red', 'font-weight':'bold' }}

    // In yellow if is positve under 4
    if (value >= 0 && value < 4) return {style:{ color:'yellow'}}

    // Green for the rest
    return { style: { color: 'green'}}
  }
}

The next example will transform the value depending on the field:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
let formatter = {
  fields: 'ALL',
  format: function(field, value) {

    // Change the format of the time field to a custom one
    if (field === 'time_field' ) {
      return { 
          value: changeTimeFormat(value)
        }
    }

    // Append "-SEC" to all values of "other_field" and increase the font
    if (field === 'other_field') {
      return {
        value: value + "-SEC"
        style { 'font-size': '16px'};
      }
    }
  }
}

Group columns

Columns can be grouped like this:

RDT LI

We can define the groups and what fields will be under that group in two ways. The first one can be used when we use .fields() without specifiying the fields and we want to group some of them:

1
2
3
4
5
let groups = {
   'Group 1' : ['index_11', 'index_12']
   'Group 2': ['index_21', 'index_22', 'index_23', 'index_24']
}
rdt.set('colGroup', groups)

The second way is by telling the Field object what group to use:

1
2
3
4
5
6
7
8
let grp1 = 'Group 1';
let grp2 = 'Group 2';
let fields = [
    cf.Field('index_11').group(grp1),
    cf.Field('index_12').group(grp1),
    cf.Field('index_21').group(grp2),
    ...
]

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)

Export content to CSV

The RDT allows to export its content into a csv file. We can specify what columns to use and the name of the file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let args = {
    // The file name used without the .csv
    fileName: 'RDT-file', 

    // The names of the fields  to be exported
    columns: [ 'index_11', 'index_21' ], 
};

// When this is executed, a csv file will be downloaded in the browser.
rdt.get('csv')(args);

The use of args, as well as any of the two parameters are optional. By default all columns will be exported, and the file name will be export.csv.

Limits and Page Size

Pivot Tables uses infinite scrolling to show data as naturally as possible, but behind the scenes, it uses pages of 100 rows by default. This page size can be changed with the limit function as we can see bellow:

1
rdt.limit(200)  // Changed page size to 200

Custom Options

So far we've seen the most common options. RDT accepts some others through the customOpts property to provider more flexibility when applying custom styles:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
let opts = {
        // The height of the cells
        rowHeight: 30, 

        // The height of the headers
        headerHeight: 30, 

        // The height of group header
        groupHeaderHeight: 35,

        // The header icons when is sorted
        icons: {
            sortAscending: '<i class="fa fa-arrow-up-o"/>',
            sortDescending: '<i class="fa fa-arrow-down-o"/>',
        }

}

rdt.set('customOpts', opts)