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><html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
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%'}]
}
}
);
}
*/
</script>
</head>
<body>
<div id="visualization"></div>
</body>
</html></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