Dynamic Google Chart Table Style

Question

I am looking to dynamically apply styling to certain rows in a Google chart table. In particular, I want to highlight the text of a line if it contains a specific line. For example, if the text "total" appears in a line, I would like the entire text of this line to be in bold .

This table is populated with the results of the Keen IO query, so I cannot be sure where the interesting text may appear in the table.

I looked at the documentation found at: https://developers.google.com/chart/interactive/docs/gallery/table#customproperties
This page suggests applying CSS styles, and an example of this can be seen at: https: // developers .google.com / chart / interactive / docs / examples

However, this example used CSS during a collection of data in a table. My data is the result of a dynamic query, so I cannot use this approach. I might need to embed inline CSS at a later stage in the process.

Example

I am going to demonstrate an example scenario. Suppose I have a request to Keen IO that displays the versions and the number of different "devices". This data is in the form of JSON. When data is transferred to the Google Chart tool, the following table is displayed.

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 through the Keen API, which are then passed to the Google Chart picker. These parameters are also in the form of JSON. for instance

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

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

Sitelinks

Documentation with clear visualization: https://github.com/keen/keen-js/blob/master/docs/visualization.md

---

Similar but different questions:
Applying CSS to a Google visualization table Styling a Google
chart table

---

Answer 1

Keen, , , . , , :

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();
    });

Hide result

JS-, :.setProperty(rowIndex, colIndex, 'className', 'your-class-here')

JavaScript, , , : http://jsfiddle.net/keen/6qnpuwLx/

, if client.run().