CODEWITHSUNDEEP
javascriptphpgoogle-visualization
arielcr
arielcr

Reputation: 1663

Change table header background color in Google Charts

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!

Upvotes: 0

Views: 6440

Answers (3)

DeveloperPrime
DeveloperPrime

Reputation: 111

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
      }

Upvotes: 1

asgallant
asgallant

Reputation: 26340

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).

Upvotes: 2

Patrick Maciel
Patrick Maciel

Reputation: 4944

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

Upvotes: 1

Related Questions