How do you get different colour of Bar in single chart.

25 views
Skip to first unread message

anurag

unread,
Nov 19, 2011, 11:13:52 PM11/19/11
to google-c...@googlegroups.com, anuragtr...@gmail.com
Hello,

I am using google chart.
I have used bar chart. but each bar in same colour.
How do you get different colour of Bar in single chart.

I tried to implement but not working. Please check my following code. If any gap let me know. otherwise give me solution.


<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', 'Activity Time');
data.addColumn('number', 'Mohamed-Zidan');
data.addColumn('number', 'Marion-Grabber');
data.addColumn('number', 'Olaf-Klostermann');
data.addColumn('number', 'Rainer-Tegenkamp');
data.addColumn('number', 'Rebecca-Weigandt');
data.addRows(5);	
data.setValue(0, 0, 'Mohamed-Zidan');
data.setValue(0, 1, 180); 
														  
data.setValue(0, 2, 0);
														  
data.setValue(0, 3, 0);
														  
data.setValue(0, 4, 0);
														  
data.setValue(0, 5, 0);
data.setValue(1, 0, 'Marion-Grabber');
data.setValue(1, 1, 120); 
														  
data.setValue(1, 2, 0);
														  
data.setValue(1, 3, 0);
														  
data.setValue(1, 4, 0);
														  
data.setValue(1, 5, 0);
data.setValue(2, 0, 'Olaf-Klostermann');
data.setValue(2, 1, 120); 
														  
data.setValue(2, 2, 0);
														  
data.setValue(2, 3, 0);
														  
data.setValue(2, 4, 0);
														  
data.setValue(2, 5, 0);
data.setValue(3, 0, 'Rainer-Tegenkamp');
data.setValue(3, 1, 120); 
														  
data.setValue(3, 2, 0);
														  
data.setValue(3, 3, 0);
														  
data.setValue(3, 4, 0);
														  
data.setValue(3, 5, 0);
data.setValue(4, 0, 'Rebecca-Weigandt');
data.setValue(4, 1, 120); 
														  
data.setValue(4, 2, 0);
														  
data.setValue(4, 3, 0);
														  
data.setValue(4, 4, 0);
														  
data.setValue(4, 5, 0);
		 				
  var chart = new google.visualization.BarChart(document.getElementById('barchart'));
  chart.draw(data, {width: 760, height: 250,	
				  vAxis:{minValue:0},								  	
				  chartArea: {top:6,left:120},
				  legend: 'none',
				  colors : ['#006599', '#669900', '#ff6600', '#3385ad', '#85ad33', '#ff8532', '#66a3c2', '#a3c265', '#ffa366', '#99c2d6', '#c2d699', '#ffc299', '#cce0eb', '#e0ebcb', '#ffe0cc'],
				  fontName:'Helvetica',
				  fontSize:11,				  
				  is3D: 1,
				  isStacked: true
				 });
}
</script>  
<div id="barchart"></div>
Reply all
Reply to author
Forward
0 new messages