Hi Team,
I have draw a ColumnChart and i need to modify my x-axis labeling.
At present it was displaying like this :
(A - Tech) (A - Style) (A - Metrics) (B - Tech) (B - Style) (B -
Metrics)
I need to display it as this :
( Tech) (Style) (Metrics) (Tech) (Style) (Metrics)
|________ A ________| |________ B ________|
I have given the code here also then you all can get an idea what i
want.
<html>
<head>
<script type="text/javascript" src="
http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["columnchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data3 = new google.visualization.DataTable();
data3.addColumn('string', 'Org_L0');
data3.addColumn('number', 'P1');
data3.addColumn('number', 'P2');
data3.addColumn('number', 'P2');
data3.addRows(6);
data3.setValue(0, 0, 'A-Tech');
data3.setValue(0, 1, 12536.0);
data3.setValue(0, 2, 64.0);
data3.setValue(0, 3, 3248.0);
data3.setValue(1, 0, 'A-Style');
data3.setValue(1, 1, 3558.0);
data3.setValue(1, 2, 7904.0);
data3.setValue(1, 3, 0.0);
data3.setValue(2, 0, 'A-Metrics');
data3.setValue(2, 1, 133.0);
data3.setValue(2, 2, 280.0);
data3.setValue(2, 3, 319.0);
data3.setValue(3, 0, 'B-Tech');
data3.setValue(3, 1, 105.0);
data3.setValue(3, 2, 4571.0);
data3.setValue(3, 3, 947.0);
data3.setValue(4, 0, 'B-Style');
data3.setValue(4, 1, 5786.0);
data3.setValue(4, 2, 9.0);
data3.setValue(4, 3, 42205.0);
data3.setValue(5, 0, 'B-Metrics');
data3.setValue(5, 1, 183.0);
data3.setValue(5, 2, 279.0);
data3.setValue(5, 3, 344.0);
var chart3 = new google.visualization.ColumnChart
(document.getElementById('chart_div'));
chart3.draw(data3, {width: 700, height: 310, legend:
'bottom' , is3D: true,title: 'Detail'});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
I want not to repeat the name which is common and put it as common for
that three cols.
its like grouping some cols.
can this be done in Google Visualization API ?
Thanks & best Regards,
Sajeevi