google chart multiple values in one column - charts

Question

How make a possible to display 2 values in 1 column (split red and yellow columns in one)?
I have plan of sold and value of sold ordered by months.
For ex:
Jan -
plan:100, sold:80
Feb -
plan:150, sold:150
So i want to see 2(4 columns in mind, second value should overlap first value) columns:
100 80
150 150
first column will be colored in two colors because sold value less then plan (100/80 )
second column will be colored in one color(yellow), because second column overlap first value 150/150
isStacked: true doesn't overlay first column
Thanks for advise.
Code that i use JsFiddle and what I need
google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Plan');
data.addColumn('number', 'Sold');
data.addRows([
['Jan, 2015', 100, 80],
['Feb, 2015', 150, 150],
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {
colors: ['red', 'yellow'],
width: 600,
height: 175,
title: 'Total',
legend: 'none',
});
}

Answer 1

I was just doing a pie sample so I set up a diff bar sample with your data. It has our PDF print code in it but shows what I think you want (except the color):
http://jsfiddle.net/1og99wL1/
function drawChart() {
var oldData = new google.visualization.DataTable();
oldData.addColumn('string', 'Date');
oldData.addColumn('number', 'Plan');
oldData.addRows([
['Jan, 2015', 100],
['Feb, 2015', 150],
]);
var newData = new google.visualization.DataTable();
newData.addColumn('string', 'Date');
newData.addColumn('number', 'Sold');
newData.addRows([
['Jan, 2015', 80],
['Feb, 2015', 150],
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var data = chart.computeDiff(oldData, newData);
var options = {
colors: ['yellow'],
diff: {
oldData: { opacity: 1, color: '#ff0000' },
newData: { opacity: 1, widthFactor: 1 }
},
legend: 'none',
width: 600
};
<!-- For the PDF print -->
google.visualization.events.addListener(chart, 'ready', AddNamespace);
chart.draw(data, options);
}
Result:
Comments:
You must use "oldData" and "newData" as the names for the datasets. You cannot just choose arbitrary names. If you do, the chart will draw but the "diff" option will not work (crazy, must be burned into the code). The color must be set like below with one color set in "colors" option and the other set in "diff" option.