Combining style, interval and certainty in Google Charts - google-visualization

Question

Have a look at https://jsfiddle.net/DavidHyde/fkuonb5s/. This is based on an example from the Google Charts documentation along with the code that I'm running. I didn't write the code and am not a Charts expert by any means, so don't understand all the code yet.
Anyway, I'm having trouble combining the style, interval and certainty roles. It seems that I can apply any one, but when I have two or more, only the first is applied.
Specifying "certainty" gives this:
Applying "style" gives this:
and this is just "interval"
What I really want to do is apply the certainty role for the hatching, and the interval role for the horizontal bar.
Can anyone help? Thanks
StackOverflow says that any jsfiddle.net must be accompanied by code, so here it is...
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawRightY);
function drawRightY() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({ type: 'boolean', role: 'certainty' }); // certainty col.
data.addColumn({ type: 'string', role: 'style' }); // style col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
data.addRows([
['April', 1000, true, 'stroke-color: #703593; stroke-width: 4', 900, 1100, 'A', 'Stolen data'],
['May', 1170, true, 'stroke-color: #703593; stroke-width: 4; color: #C5A5CF', 1000, 1200, 'B', 'Coffee spill'],
['June', 660, true, 'fill-color: red; fill-opacity:.3', 550, 800, 'C', 'Wumpus attack'],
['July', 1030, false, null, 100, 300, null, null]
]);
var barOptions = new google.visualization.ComboChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
var barSetting = {
seriesType: "bars",
areaOpacity: 0.1,
orientation: 'horizontal',
series: { 2: { 'lineWidth': 5, 'barWidth': 1, 'color': '#000000', type: 'line' } },
legend: 'none',
vAxis: {
maxValue: 100,
minValue: 0,
format: "#'%'"
},
hAxis: {
textStyle: {
fontSize: 9
}
},
colors: ["#fbbd86", "#000000", "#000000", "#000000"],
height: 200,
width: 420
};
barSetting.intervals = { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' };
barOptions.draw(view, barSetting);
}

Answer 1

Here is the updated jsfiddle from #dlaliberte showing the chart working - https://jsfiddle.net/dlaliberte/cvu3t7se/6/.
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawRightY);
function drawRightY() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({ type: 'boolean', role: 'certainty' }); // certainty col.
data.addColumn({ type: 'string', role: 'style' }); // style col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'number', role: 'interval' }); // interval role col.
data.addColumn({ type: 'string', role: 'annotation' }); // annotation role col.
data.addColumn({ type: 'string', role: 'annotationText' }); // annotationText col.
data.addRows([
[
'April'
, 1000
, true
, 'stroke-color: #703593; stroke-width: 4'
, 900
, 1100
, 'A'
, 'Stolen data'
],
[
'May'
, 1170
, true
, 'stroke-color: #703593; stroke-width: 4; color: #C5A5CF'
, 1000
, 1200
, 'B'
, 'Coffee spill'
],
[
'June'
, 660
, true
, 'fill-color: red; fill-opacity:.3'
, 550
, 800
, 'C'
, 'Wumpus attack'
],
[
'July'
, 1030
, false
, null
, 100
, 300
, null
, null
]
]);
var barOptions = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, 4, 5, 6, 7]);
var barSetting = {
// seriesType: "bars",
//intervals: { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' },
areaOpacity: 0.1,
orientation: 'horizontal',
xseries: { 0: { 'lineWidth': 5, 'barWidth': 1, 'color': '#000000', type: 'line' } },
legend: 'none',
vAxis: {
maxValue: 100,
minValue: 0,
format: "#'%'"
},
hAxis: {
textStyle: {
fontSize: 9
}
},
colors: ["#fbbd86", "#000000", "#000000", "#000000"],
height: 200,
width: 420
};
barSetting.intervals = { 'lineWidth': 5, 'barWidth': 1, style: 'box', 'color': '#000000' };
barOptions.draw(view, barSetting);
}