Is possible each bar of column chart is plot with different color ?

[anurag]

Hi,

Is possible each bar of column chart is plot with different color?

I tried with color properties some like this

colors: ['#84AACB', '#885654', '#AED494', '#FFAC8C',
'#7FFF7F','#885654',
'#FFD4AA' ,'#FFD4AA' ,'#0000FF','#FFD4FF','#00FFFF'],

But unable to get successful result.

Full code is mention below :--------------------------------
Please help me out from this problem.



<script type="text/javascript" src="https://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:
["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Individual_Activities');
data.addColumn('number','BVB Dortmund');
data.addRows(2);
data.setValue(0, 0, 'Individual_Activities');
data.setValue(0, 1, 20.45);
data.setValue(1, 0, 'BVB Dortmund');
data.setValue(1, 1, 34);
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div3'));
chart.draw(data, {width: 400, height: 240,
colors: ['#84AACB', '#885654', '#AED494', '#FFAC8C',
'#7FFF7F','#885654',
'#FFD4AA' ,'#FFD4AA' ,'#0000FF','#FFD4FF','#00FFFF'],
chartArea: {top:4},
vAxis:{minValue:0.0,format:'##.##'},
xAxis:{format:'##.##'},
legend: 'none',
fontName:'Helvetica',
fontSize:11,
is3D: 1
});
}
</script>



Thanks in advance

[visigoth]

The colors option allows you to specify the colors of each series, which corresponds to a column in the data table.

You can swap the roles of the columns and rows in your data table and see if it works for you.

If you are indeed interested in painting bars of the same series in different colors, then I'm afraid this is not supported.

Visigoth

[asgallant]

Colors are assigned by series, so in your case you could have one color for "Individual Activities" and one for "BVB Dortmund" - is that what you are looking for?

If so, you are on the right track, but need to fix your data.setValue statements.  The syntax is data.setValue(<row>, <column>, <value>), so your code should look like:

data.setValue(0, 0, "2011");

data.setValue(0, 1, 20.45);

data.setValue(0, 2, 34);

since you assigned column 0 to "year".

If you are looking for a different effect (like columns labeled "Individual Activities" and "BVB Dortmund" with different colors), the code is more complex.  I have addressed this multiple times, you can look here and here as a start; if you need more help, feel free to ask.