4

I am looking dynamically apply styling to specific rows in a Google Charts Table. Specifically, I am looking to bold the text of a row if it contains a specific string. For example, if the text 'total' appears in a row, I would want to have all text of this row be bold.

This table is being populated with results from a Keen IO query, so I cannot be sure of where in the table the text of interest may occur.

I was looking the documation found at: https://developers.google.com/chart/interactive/docs/gallery/table#customproperties
This page suggested applying CSS styling and an example of this can be seen at: https://developers.google.com/chart/interactive/docs/examples

However, this example was applying the CSS during population of the data in the table. My data is the result of a dynamic query, so I am not going to be able to use this approach. I may need to inject inline CSS at a later stage of the process.

Example

I am going demonostrate the scenario with an example. Suppose I have a query to Keen IO fetched the versions and counts of various 'devices'.This data is in JSON form. When the data is fed into the Google Chart tool, the following table is outputted.. 

device  version count  
item1   1.0     4
item1   1.1     3  
item1   total   7  
item2   5.4     8  
item2   5.5     2  
item2   6.0     14  
item2   total   24

I also have the ability to specify Chart Options, via the Keen API, that are then passed through to the underling Google Chart engine. These options are also in JSON form. For example

{
  "chartOptions": {
    "page": "enable",
    "pageSize": 25
  }
}

Would cause the resulting table to include paging with a page size of 25.

Additional References

Keen Visualizaion Documentation: https://github.com/keen/keen-js/blob/master/docs/visualization.md

Similar, but different questions:
Applying CSS to Google Visualization Table
Styling Google Charts Table

Community
  • 1
  • 1
Andrew
  • 902
  • 1
  • 11
  • 28

1 Answers1

3

Typically you will define the Keen query, then create the visualization object, then lastly run both the query and visualization. Here's an example of how you can manipulate the data being charted: 

Keen.ready(function(){
    // Create a new Query instance
    var query = new Keen.Query("count", {
        event_collection: "user_action",
        group_by: "user.name",
        timeframe: {
      start: "2013-12-01",
      end: "2014-12-01"
    }
    });
    
    // Create a new Dataviz instance
    var table = new Keen.Dataviz()
     .chartType('table')
      .el(document.getElementById('table'))
      .chartOptions({
        width: '100%'
      });
    
    // Run the query and the result
    client.run(query, function(err, res){
        table
         .parseRequest(this)
          .dateFormat(function(googleDataTable){
           // .setProperty(rowIndex, colIndex, 'className', 'your-class-here')
            googleDataTable.setProperty(3, 0, 'className', 'custom custom-left');
            googleDataTable.setProperty(3, 1, 'className', 'custom custom-right');
            return googleDataTable;
          })
          .render();
    });

The particular line of JS code that sets a line in the table to a different format is: .setProperty(rowIndex, colIndex, 'className', 'your-class-here')

I included a link to a working JavaScript fiddle that runs this code and shows the table being dynamically formatted to highlight a row: http://jsfiddle.net/keen/6qnpuwLx/

If you're interested in adding logic, just include your if statement in the client.run() function.

jandwiches
  • 487
  • 3
  • 7