Conditional Formatting

Sometimes you might want to format values differently depending on their value. You could use SQL to include your formatting in the retrieved data. For example:

SELECT `id`,`title`, `language`,
    CONCAT('<span style="color:',
        CASE
        WHEN `hits` BETWEEN 0 AND 100 THEN 'red'
        WHEN `hits` BETWEEN 100 AND 200 THEN 'orange'
        ELSE 'green'
    END,'">',`hits`,'</span>') AS `hits`,
    SUBSTRING(`introtext`,1,40) AS `introtext`, `created`, `modified`
    FROM `#__content`

But now the resulting data becomes a string rather than a number, and for Google tables this would mean that the column no longer sorts as expected. A better solution is to use Extra Javascript to add the required formatting to the data, while keeping the column data numeric. In this example the Javascript is more complex because we need to iterate through the Google data table, assigning different formatting to each row:

var rows = window.plotalot_chart_103_data.getNumberOfRows();
for (var i=0; i < rows; i++)
{
    var hits = window.plotalot_chart_103_data.getValue(i, 3);
    if (hits < 100)
        window.plotalot_chart_103_data.setProperties(i,3,
            {style:'background-color:red;color:white;font-style:bold;'});
    if (hits >= 100)
        window.plotalot_chart_103_data.setProperties(i,3,
            {style:'background-color:green;color:white;font-style:bold;'});
}