Data List

The Data List is an ag-grid based visualization that displays raw data. It is useful when you need to render your raw data using specific html and styles using a custom row renderer. Refer to the Raw Data Table if you need to render your raw data in a table format.

Rendering the Data List

The Data List is different than aggregated visualizations in that it uses .field() instead of .groupby() and it doesn’t use .metrics(). An example with partial code is below.

const ccr = data => {
    const element = 
    ` <div class="test-row-style">
        Created at: <u>${data.created_at}</u>
        User name: <b>${data.user_name}</b>
    </div> `;
    return {content: element};
};

cf.provider("Elasticsearch")
    .source('vc_airline_tweets')
    .fields("user_name", "created_at", "text.keyword", "kwd_category", "sentiment", "user_name", "user_profile_image_url", "user_screen_name", "user_created_at", "tweet_id")
    .graph("Data List")
    .set("customItemRenderer", ccr)
    .set("customOpts", { animateRows: true, rowHeight:100 })
    .set("keyField", "tweet_id")
    .set("sort", [{ "created_at": "desc" }])
    .element('chart')
    .execute();

This will render a Data List similar to the one below:

The important functions to render a Data List are explained next.

Fields

The .fields() function is used when querying raw data. You can pass the needed field names in a comma-sepparated fashion. Example:

dl.fields("created_at","user_name", "data_id", "id_field");

You can also pass an array of Field objects. In either case, ChartFactor will query the specified fields and pass them to your customItemRender.

Note

If you do not specify any field in the .fields() function, ChartFactor defaults to query all fields available in your datasource.

Custom row renderer

The Data List visualization requires you to provide a customItemRenderer setting with the function that renders your data. See the example below:

const ccr = data => {
    const element = ` <div class="test-row-style">
        Created at: <u>${data.created_at}</u>
        User name: <b>${data.user_name}</b>
    </div> `;
    return {content: element};
};

dl.set("customItemRenderer", ccr);

Sort

Sort order can be specified as below.

dl.set('sort', [
    {'created_at': 'desc'},
    {'my_field': 'asc'},
    {'my_field_2': 'desc'}
])

Key field

Although keyField is an optional setting, it is required for the Data List to work properly with the Time Slider's data player. It is needed to properly merge new data as it arrives. Example:

dl.set("keyField", "tweet_id");

Data streaming

As mentioned earlier, the Data List visualization works together with the Time Slider's data player to show new data as it arrives.

When users press "Play" on the Time Slider, assuming you are sorting your Data List by datetime descending, you can visualize newly arrived data at the top of the Data List. Old data is removed at the bottom to conserve memory. You can configure a page size using the .limit() function to specify how much data you want to hold in the Data List at any given time.

dl.limit(200);

When the Time Slider player is stopped, the Data List visualization automatically switches to its infinite scroll mode where new data pages of the specified limit are retrieved as users scroll up and down.

Note

The default limit value is 100