Skip to content

Raw Data Table Demo

This demo illustrates how to use ChartFactor to render its Raw Data Table component. This is a high performance component with infinite scrolling capability. Infinite scrolling means that only viewable records are retrieved from the backend data system and loaded into the DOM (Document Object Model).

The size of its scrollbar gives users a hint on how many records exist in the underlying table even when these records have not yet been retrieved from the backend data system. Drag a column to the left or to the right to change its position. Click or tap on the header to sort a column ascending or descending.

On the developer side, it is a common request to render all fields or all fields except for a few ones. The Raw Data Table syntax allows to accomplish this without having to name all table fields.

The table below shows raw data from the Ticket Sales table residing in our Elasticsearch server.

If you want to see the demo in full screen click here

Review the complete source code and copy/paste it to create your own. 
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Simple Chart Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="chart" class="ag-blue"></div>
  
  <script src="../assets/jquery.min.js"></script>
  <script src="../../lib/cftoolkit.min.js"></script>
  <script src="../assets/cft-elasticsearch-provider.min.js"></script>
  <script src="../assets/cft-tables-charts.min.js"></script>       
  <script src="./index.js"></script>
</body>
</html>

let cf = window.cf;
let $ = window.$;

$(document).ready(function () {
    var providers = [{
        name: 'Elasticsearch',
        provider: 'elasticsearch',
        url: 'https://chartfactor.com/elastic/'
    }];

    // Prepare the fields
    var fields = [
        cf.Field('eventname.keyword','Event Name'),
        cf.Field('venuecity.keyword', 'Venue City'),
        cf.Field('catname.keyword', 'Category Name'),
        cf.Field('pricepaid', 'Price')
      ]
    
    cf.setProviders(providers);

    // The fields to be used in the RDT can be specified in different ways:
    // .fields(field0, field1, field2, field3)
    // .fields() If empty, will look for all fields
    // .exclude("fieldName1","fieldName2") // Fields to be excluded from the query

    cf.provider('Elasticsearch')
        .source('ticket_sales')
        // .fields('eventname.keyword','venuecity.keyword','catname.keyword','pricepaid')
        .fields()
        .graph('Raw Data Table')
        .set('showRowNumber', true)
        .set('autoSizeColumns', true)
        .set('pageSize', 200)
        .element('chart')
        .execute();
});

html, body{
  height: 100%;
}
#chart {
  height: 97%;
  width: 95%;
}

The Ticket Sales data is derived from the Amazon’s Sample Database for Redshift. The data represents ticket sales activity for the fictional TICKIT web site, where users buy and sell tickets online for different types of events.