Click here to Skip to main content
15,887,596 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hii , 

I am using google chart's stacked bar chart.I did many customization to achive my functionality.But few things i want.

Please find my below google chart example

<pre>&lt;html&gt;
  &lt;head&gt;
    &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;

	var wrapper;
	function drawVisualization() {
	
		// Create and populate the data table.
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'department');
		data.addColumn('number', 'Draft');
		data.addColumn('number', 'InProgress');
		data.addColumn('number', 'Completed');

		data.addRows([
			['IT', {v:18, f:'18%'}, {v:40, f:'40%'}, {v:42, f:'42%'}],
			['Administrative', {v:40, f:'40%'}, {v:30, f:'30%'}, {v:30, f:'30%'}],
			['Sales', {v:35, f:'35%'}, {v:10, f:'10%'}, {v:55, f:'55%'}],
			['Sales', {v:15.5, f:'15.5%'}, {v:65, f:'65%'}, {v:19.5, f:'19.5%'}]
			/*
			['Administrative', 40, 30, 30],
			['Sale', 35, 10, 55],
			['Accounts', 10, 80, 10]
			*/
		]);	
	
		
		//wrapper for graph
		wrapper = new google.visualization.BarChart(document.getElementById('visualization'));
		
		//attach event listeners
		google.visualization.events.addListener(wrapper, 'select', onSelectHandler);

		/*
		var formatter = new google.visualization.NumberFormat(
		  {negativeColor: 'red', suffix : "%"});
		formatter.format(data, 2);
		*/
		
		//add view for data
		var view = new google.visualization.DataView(data);
		view.setColumns([0, 
						1, {
							calc: "stringify",
							sourceColumn: 1,
							type: "string",
							role: "annotation"
						}, 2, {
							calc: "stringify",
							sourceColumn: 2,
							type: "string",
							role: "annotation"
						}, 3, {
							calc: "stringify",
							sourceColumn: 3,
							type: "string",
							role: "annotation",
						}
						]);
		
		//set options for graph
		var options = {
			title:"Objective status report",
			isStacked: true,

			width:1000, height:400,
			vAxis: {title: ""},
			hAxis: {title: ""},

			//hide tool tip
			'tooltip' : {
			  trigger: 'none'
			},
			
			
			hAxis: {
				viewWindow: {
					min: 0,
					max: 100
				},
				ticks: [{v:0, f:'0%'},{v:10, f:'10%'},{v:20, f:'20%'},{v:30, f:'30%'},
						{v:40, f:'40%'}, {v:50, f:'50%'}, {v:60, f:'60%'}, {v:70, f:'70%'},
						{v:80, f:'80%'}, {v:90, f:'90%'}, {v:100, f:'100%'}]
						
			},

			//set colour for series
			series: [{color: '#F66E25', visibleInLegend: true}, { color : '#2579F6', visibleInLegend: true}, {color: '#9946F7', visibleInLegend: true}]
		};		
		
		//draw graph
		wrapper.draw(view, options);

	
		function onSelectHandler(){
			alert("hi there");
		}
		

	}
	
    google.load('visualization', '1', {packages: ['corechart']});
	google.setOnLoadCallback(drawVisualization);

/*	
function drawVisualization_bk() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'department');
  data.addColumn('number', 'Draft');
  data.addColumn('number', 'InProgress');
  data.addColumn('number', 'Completed');

  data.addRows([
    ['IT', 10, 40, 50],
    ['Administrative', 40, 30, 30],
    ['Sale', 35, 10, 55],
    ['Accounts', 10, 80, 10]
  ]);
  
  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
  draw(data,
       {title:"Objective status report",
        isStacked: true,
        width:1000, height:400,
        vAxis: {title: ""},
        hAxis: {title: ""},
		'tooltip' : {
		  trigger: 'none'
		},

		hAxis: {
			viewWindow: {
				min: 0,
				max: 100
			},
			//ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] // display labels every 25
			ticks: [{v:0, f:'0%'},{v:10, f:'10%'},{v:20, f:'20%'},{v:30, f:'30%'},
					{v:40, f:'40%'}, {v:50, f:'50%'}, {v:60, f:'60%'}, {v:70, f:'70%'},
					{v:80, f:'80%'}, {v:90, f:'90%'}, {v:100, f:'100%'}]
					
		}		

		}
      
	  );
}
*/
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="visualization"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>


What i want is , 

1. the value present inside each bar chart must be in center 

2. The total of each each inside value should come at the end of each bar 

Please suggest 
Posted
Comments
Torakami 10-Apr-15 5:48am    
Please suggest on this , as its very urgent for me . Your help would be much helpful for me

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900