Hide column and its annotation value in Google column chart - charts

Question

I've got a column google chart where I have four bars for each month. In the view set, in order to put the values on the top of each bar, I added an annotation for each one as following:
view.setColumns([0, 1,
{
id:"col1",
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" }, 2,
{
id:"col1",
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, 3,
{
id:"col1",
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}, 4,
{
id:"col1",
calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"
}
]);
I also added four buttons, for each column, to hide them. When I use the function hideColumns, it receives an array of indexes to identify the columns I want to hide. However, when I click on the button to hide the column, its annotation value keeps displayed on the chart and goes to a neighbor column. How do I hide the column and the annotation at the same time avoiding this? I tried assigning an id to the object column (annotation) and use it in the hideColumns function, but the function only receives an array of indexes.
This is the piece of code to hide the column number 1:
var hideAtv = document.getElementById("hideAtividades");
hideAtv.onclick = function()
{
view.hideColumns([1]);
chart.draw(view, options);
}
Thanks in advance

Answer 1

the annotation column should always follow the series column in the data table...
so if you want to hide column 1, also hide column 2...
var hideAtv = document.getElementById("hideAtividades");
hideAtv.onclick = function()
{
view.hideColumns([1, 2]);
chart.draw(view, options);
}
EDIT
when using DataView.hideColumns, the column references are for the data table
so it must not handle hiding calculated columns, e.g. annotation columns here
as such, instead of using hideColumns, use setColumns as used initially,
just without the column to be hidden
you can get the column definitions back by using DataView.getViewColumns
then check if the column should be visible...
if (columnDef.hasOwnProperty('sourceColumn')) {
if (columnDef.sourceColumn !== 1) {
viewColumns.push(columnDef);
}
} else if (columnDef !== 1) {
viewColumns.push(columnDef);
}
view.setColumns(viewColumns);
see following working snippet, here the same function is used to hide columns,
based on the button's value attribute
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2', 'y3'],
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
]);
var view = new google.visualization.DataView(data);
var columns = [0, 1,
{
id:"col1",
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 2,
{
id:"col1",
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, 3,
{
id:"col1",
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}, 4,
{
id:"col1",
calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"
}
];
view.setColumns(columns);
var options = {
chartArea: {
top: 12,
left: 32,
bottom: 60,
right: 8,
height: '100%',
width: '100%'
},
height: 496,
legend: {
position: 'bottom'
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(view, options);
document.getElementById('hideSeries1').addEventListener('click', hideColumn, false);
document.getElementById('hideSeries2').addEventListener('click', hideColumn, false);
document.getElementById('hideSeries3').addEventListener('click', hideColumn, false);
document.getElementById('hideSeries4').addEventListener('click', hideColumn, false);
document.getElementById('resetSeries').addEventListener('click', resetSeries, false);
function hideColumn(e) {
var hideColumn = parseInt(e.target.value);
var viewColumns = [];
view.getViewColumns().forEach(function (columnDef) {
if (columnDef.hasOwnProperty('sourceColumn')) {
if (columnDef.sourceColumn !== hideColumn) {
viewColumns.push(columnDef);
}
} else if (columnDef !== hideColumn) {
viewColumns.push(columnDef);
}
});
view.setColumns(viewColumns);
chart.draw(view, options);
}
function resetSeries(e) {
view.setColumns(columns);
chart.draw(view, options);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<button id="hideSeries1" value="1">Hide Series 1</button>
<button id="hideSeries2" value="2">Hide Series 2</button>
<button id="hideSeries3" value="3">Hide Series 3</button>
<button id="hideSeries4" value="4">Hide Series 4</button>
<button id="resetSeries">Reset All Series</button>
note: the above snippet keeps previously hidden buttons hidden, by using...
view.getViewColumns().forEach
to allow only one column to be hidden at a time, use...
columns.forEach
see following snippet for the latter...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2', 'y3'],
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
]);
var view = new google.visualization.DataView(data);
var columns = [0, 1,
{
id:"col1",
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 2,
{
id:"col1",
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, 3,
{
id:"col1",
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}, 4,
{
id:"col1",
calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"
}
];
view.setColumns(columns);
var options = {
chartArea: {
top: 12,
left: 32,
bottom: 60,
right: 8,
height: '100%',
width: '100%'
},
height: 496,
legend: {
position: 'bottom'
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(view, options);
document.getElementById('hideSeries1').addEventListener('click', hideColumn, false);
document.getElementById('hideSeries2').addEventListener('click', hideColumn, false);
document.getElementById('hideSeries3').addEventListener('click', hideColumn, false);
document.getElementById('hideSeries4').addEventListener('click', hideColumn, false);
document.getElementById('resetSeries').addEventListener('click', resetSeries, false);
function hideColumn(e) {
var hideColumn = parseInt(e.target.value);
var viewColumns = [];
columns.forEach(function (columnDef) {
if (columnDef.hasOwnProperty('sourceColumn')) {
if (columnDef.sourceColumn !== hideColumn) {
viewColumns.push(columnDef);
}
} else if (columnDef !== hideColumn) {
viewColumns.push(columnDef);
}
});
view.setColumns(viewColumns);
chart.draw(view, options);
}
function resetSeries(e) {
view.setColumns(columns);
chart.draw(view, options);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<button id="hideSeries1" value="1">Hide Series 1</button>
<button id="hideSeries2" value="2">Hide Series 2</button>
<button id="hideSeries3" value="3">Hide Series 3</button>
<button id="hideSeries4" value="4">Hide Series 4</button>
<button id="resetSeries">Reset All Series</button>