Data annotations arrangement - charts

Question

I wanted to arrange data annotations on google chart following the instructions I found here, and google documentation. And this is what I have now:
https://jsfiddle.net/u6tn97km/
I couldn't place the data values and data points together. Instead data values are all stacked together. How can I fix this problem?
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'values');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addRows([
[1, 19,4,7,17,20,24,26],
[2, 13,2,10,11,15,20,25],
[3, 14,7,10,10,17,20,25],
[4, 14,4,8,11,16,26,27],
[5, 12,5,8,10,13,19,21],
[6, 13,1,10,10,15,20,25],
[7, 18,7,11,13,22,23,24],
[8, 17,3,9,12,22,25,26],
[9, 25,12,20,24,26,26,27],
[10, 16,6,8,15,16,17,23],
[11, 12,1,3,6,18,18,26],
[12, 12,1,3,12,12,18,19]]);
// The intervals data as narrow lines (useful for showing raw source 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'
}, 4, {
calc: 'stringify',
sourceColumn: 4,
type: 'string',
role: 'annotation'
}, 5, {
calc: 'stringify',
sourceColumn: 5,
type: 'string',
role: 'annotation'
}, 6, {
calc: 'stringify',
sourceColumn: 6,
type: 'string',
role: 'annotation'
}, 7, {
calc: 'stringify',
sourceColumn: 7,
type: 'string',
role: 'annotation'
} ]);
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars', pointSize: 9, barWidth: 1, shortBarWidth:0.5},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
annotations: { stemColor: 'white', textStyle: { fontSize: 10 } },
pointSize: 8,
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
// chart_lines.draw(data, options_bars);
chart_lines.draw(view, options_bars);
}
and HTML:
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>

Answer 1

annotations are placed above the series they represent,
since the interval columns are roles and not series,
all the annotations are stacked above the one point
to place the annotations in the desired location,
we can add additional, hidden series to the chart,
and an annotation above the new series
add the new series as a column on the data view,
then add the annotation after the new series...
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, 3, 4, 5, 6, 7, { // new series start here, after all the original columns
calc: function (dt, row) {
return dt.getValue(row, 2);
},
type: 'number'
}, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, {
calc: function (dt, row) {
return dt.getValue(row, 3);
},
type: 'number'
}, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, {
...
to hide the new series, use the series option to change the type to scatter, and set the pointSize to zero
series: {
1: {
pointSize: 0,
type: 'scatter'
},
2: {
pointSize: 0,
type: 'scatter'
},
...
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'values');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addRows([
[1, 19,4,7,17,20,24,26],
[2, 13,2,10,11,15,20,25],
[3, 14,7,10,10,17,20,25],
[4, 14,4,8,11,16,26,27],
[5, 12,5,8,10,13,19,21],
[6, 13,1,10,10,15,20,25],
[7, 18,7,11,13,22,23,24],
[8, 17,3,9,12,22,25,26],
[9, 25,12,20,24,26,26,27],
[10, 16,6,8,15,16,17,23],
[11, 12,1,3,6,18,18,26],
[12, 12,1,3,12,12,18,19]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, 3, 4, 5, 6, 7, {
calc: function (dt, row) {
return dt.getValue(row, 2);
},
type: 'number'
}, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, {
calc: function (dt, row) {
return dt.getValue(row, 3);
},
type: 'number'
}, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, {
calc: function (dt, row) {
return dt.getValue(row, 4);
},
type: 'number'
}, {
calc: 'stringify',
sourceColumn: 4,
type: 'string',
role: 'annotation'
}, {
calc: function (dt, row) {
return dt.getValue(row, 5);
},
type: 'number'
}, {
calc: 'stringify',
sourceColumn: 5,
type: 'string',
role: 'annotation'
}, {
calc: function (dt, row) {
return dt.getValue(row, 6);
},
type: 'number'
}, {
calc: 'stringify',
sourceColumn: 6,
type: 'string',
role: 'annotation'
}, {
calc: function (dt, row) {
return dt.getValue(row, 7);
},
type: 'number'
}, {
calc: 'stringify',
sourceColumn: 7,
type: 'string',
role: 'annotation'
}]);
var options_bars = {
title: 'Bars, default',
colors: ['#d9544c'],
curveType: 'function',
series: {
1: {
pointSize: 0,
type: 'scatter'
},
2: {
pointSize: 0,
type: 'scatter'
},
3: {
pointSize: 0,
type: 'scatter'
},
4: {
pointSize: 0,
type: 'scatter'
},
5: {
pointSize: 0,
type: 'scatter'
},
6: {
pointSize: 0,
type: 'scatter'
},
7: {
pointSize: 0,
type: 'scatter'
}
},
intervals: {style: 'bars', pointSize: 9, barWidth: 1, shortBarWidth: 0.5},
tooltip : {trigger: 'none'},
enableInteractivity: false,
annotations: {stemLength: 2, stemColor: 'transparent', textStyle: {fontSize: 10}},
pointSize: 8,
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(view, options_bars);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>