Google charts bars in different colors

Question

I have been reading and reading but i am unable to find a solution.

Below is my code, it works 100%, all I want to do is make every bar a different color.

Could someone please help me make every bar a different color?

I also need the legend to be 30% and chart 70%.

PHP

$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
    array('label' => 'NAME', 'type' => 'string'),
    array('label' => 'VALUE', 'type' => 'number'));
$rows = array();
while ($r = mysql_fetch_assoc($sth)) {
    $temp = array();
    $temp[] = array('v' => (string) $r['NAME']); 
    $temp[] = array('v' => (int) $r['VALUE']); 
    $rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);

JavaScript:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
    var options = {
        title: 'Fund Value',
        is3D: 'true',
        colors: ["red"],
        width: 800,
        height: 600,
        legend: { textStyle: { fontSize: 10 }}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>

score 0 · Answer 1 · answered Sep 01 '17 at 11:48

there are a couple ways you can color bars

1) use the colors configuration option

which takes an array of color strings

colors: ['cyan', 'magenta', 'yellow', 'lime']

each color in the array, will be assigned to each series, or column, in the data table
(after the x-axis)

to see all the colors, you would need four series columns

var data = new google.visualization.DataTable({
  cols: [
    {label: 'X', type: 'string'},
    {label: 'A', type: 'number'},
    {label: 'B', type: 'number'},
    {label: 'C', type: 'number'},
    {label: 'D', type: 'number'}
  ],
  rows: [
    {c:[{v: 'Total'}, {v: 1}, {v: 2}, {v: 3}, {v: 4}]}
  ]
});

2) use a 'style' column role

a 'style' column role is another data table column,
that follows the series you want to style

the values for the column can be a color string

var data = new google.visualization.DataTable({
  cols: [
    {label: 'X', type: 'string'},
    {label: 'Y', type: 'number'},
    {role: 'style', type: 'string'}
  ],
  rows: [
    {c:[{v: 'Category A'}, {v: 1}, {v: 'cyan'}]},
    {c:[{v: 'Category B'}, {v: 2}, {v: 'magenta'}]},
    {c:[{v: 'Category C'}, {v: 3}, {v: 'yellow'}]},
    {c:[{v: 'Category D'}, {v: 4}, {v: 'lime'}]}
  ]
});

note: 'style' column roles do not sync with the legend
if you must have a legend, see --> Example: Build custom legend

see following working snippet, which includes both options...

google.charts.load('current', {
  callback: function () {
    drawChartColumns();
    drawChartRows();
  },
  packages: ['corechart']
});

function drawChartColumns() {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'X', type: 'string'},
      {label: 'A', type: 'number'},
      {label: 'B', type: 'number'},
      {label: 'C', type: 'number'},
      {label: 'D', type: 'number'}
    ],
    rows: [
      {c:[{v: 'Total'}, {v: 1}, {v: 2}, {v: 3}, {v: 4}]}
    ]
  });

  var options = {
    colors: ['cyan', 'magenta', 'yellow', 'lime'],
    legend: {
      position: 'top'
    }
  };

  var chart = new google.visualization.BarChart(
    document.getElementById('chart_col')
  );
  chart.draw(data, options);
}

function drawChartRows() {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'X', type: 'string'},
      {label: 'Y', type: 'number'},
      {role: 'style', type: 'string'}
    ],
    rows: [
      {c:[{v: 'Category A'}, {v: 1}, {v: 'cyan'}]},
      {c:[{v: 'Category B'}, {v: 2}, {v: 'magenta'}]},
      {c:[{v: 'Category C'}, {v: 3}, {v: 'yellow'}]},
      {c:[{v: 'Category D'}, {v: 4}, {v: 'lime'}]}
    ]
  });

  var options = {
    legend: {
      position: 'top'
    }
  };

  var chart = new google.visualization.BarChart(
    document.getElementById('chart_row')
  );
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>COLUMNS</div>
<div id="chart_col"></div>
<div>ROWS</div>
<div id="chart_row"></div>

Google charts bars in different colors

1 Answers1