Question

I have been working on a dashboard using the Google visualization where I am presenting data into a google table from a database query. So far, I have the table created and the data being presented perfectly, but now I want to add some conditional formatting based on specific values in the table.

I am trying for add some formatting to the table using the following code:

<style type='text/css'>
  .alert-frozen{background-color:#F8D0D8;}
  .alert-closed{background-color:#F8D0D8;}
</style>

$(function(table){
$.getJSON('src/getReleases.php', function(releaseData) {
                var rel = new google.visualization.DataTable();
                rel.addRows(releaseData.length);
                rel.addColumn('string','DatabaseID');
                rel.addColumn('string','Release ID');
                rel.addColumn('string','days_to_freeze');
                $.each(releaseData, function(k, val){
                    var days = parseInt(val.days_to_freeze);
                    if(days > 0){
                      //var a = "{'style':'background-color:#F8D0D8;'}";
                                              var a = "{'className': 'alert-frozen'}"   

                    }
                    rel.setCell(k, 0, val.database_id ,null ,{'className':a});
                    rel.setCell(k, 1, val.release_id ,null ,{'className':a});   
                    ... 

The problem is that the javascript variable does not seem to be expanded Testing indicates that ‘a’ is being set to the correct value, but not being displayed the the page is reloaded.

Probably a really simple problem, but I cannot seem to understand what I am doing wrong – someone help!

Thanks.

Answer 1

Right now a is the string

"{'className': 'alert-frozen'}"

but if you’re setting a itself as the className property you probably just want it to be the string

'alert-frozen'