Change table header background color in Google Charts

Question

Is there a way to change the entire background color of the header row (and rows) in Google Charts?

In the docs they said you can do it using:

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'}); 

But I need to dinamicly change the color, according to some values I get from the database using PHP.

Currently this is my working code (without changing any styles)

var data = new google.visualization.DataTable();

<?php foreach($table['TITLES'] as $title) { ?>

data.addColumn('string', '<?php echo $title['TITLE_TEXT']; ?>');

<?php } ?>

<?php foreach($table['ROWS'] as $row) {

    $cols = "";
    foreach($row['COLS'] as $col)
        $cols .= "'".$col['VALUE']."',";
    $cols = rtrim($cols,",");

?>

data.addRow([<?php echo $cols; ?>]);

<?php } ?>

var table = new google.visualization.Table(document.getElementById('chart_div_<?php echo $item; ?>'));
table.draw(data, {showRowNumber: true});

Any help would by appreciated!

Answer 1

With the Table Visualizations you can control colors a few different ways:

1. use the cssClassNames option (see available options ). This allows you to set your own classes for the various different table elements, which you can then use CSS to style however you like.
2. Set the style property of individual cells.
3. Set the className property of individual cells.

Using the last two ways, you can set the styling on cells individually if you want to make them different from the default (or different from any custom styling applied using the first method).

There are also some formatters you can use to adjust the appearance of the cells in a table (the ColorFormatter may help you).

Answer 2

Create a options variable, and then use in chart declaration.

var options = {
  title: 'Markup by Period',
  legend:'bottom',
  hAxis: {title: 'Period',  titleTextStyle: {color: 'black'}} ,
  vAxis: {title: 'Amount',  titleTextStyle: {color: 'black'}}  ,
  width:400,
  height:250,
  backgroundColor: '#F4F4F4',
  chartArea:{width:300, left:60}};

var chart = new google.visualization.LineChart(document.getElementById('chart_div2'));

// You can pass the options array in draw method.
chart.draw(data, options);

That: backgroundColor: '#F4F4F4',

[EDIT]

Maybe this answers help you: Google Chart Background Color

Sorry for my english

Answer 3

function drawSettingsTable() {
    document.settingsData = new google.visualization.DataTable();
    document.settingsData.addColumn('string', 'Setting');
    document.settingsData.addColumn('string', 'Current Value');
    document.settingsData.addColumn('string', 'Meaning');
    document.settingsData.addRows(
                [["          ", "         ", "                  "],
                ["           ", "         ", "                  "],
                ["           ", "         ", "                  "],
                ["           ", "         ", "                  "]
            ]
            );
    document.settingsTable = new google.visualization.Table(document.getElementById('settingsDiv'));
    document.settingsTable.draw(document.settingsData, {
        showRowNumber: false,
        allowHtml: true,
        width: "100%",
        cssClassNames: {headerRow:'columnTitle'}
    });

And create the class .columnTitle in your css file with the desired proper tie, for example:

.columnTitle {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-size: 14px; 
          color:white;
          background-color: #607A75
      }