Rescale google line chart X axis when a series is hidden - charts

Question

I am hiding/showing series in a google line chart when the legend is clicked using this code:
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function () {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
}
else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view, burndown_options);
}
}
});
When a series is hidden the Y axis automatically rescales itself. Is there a way to also get the X axis to rescale?
Here is a jsfiddle with my code and data: http://jsfiddle.net/LarryMartell/my906Lw2/5/

Answer 1

although the columns may be excluded in the view by returning null,
all of the rows are still present,
which is why the x-axis doesn't change.
we must exclude the rows where all values are null,
in order to re-scale the x-axis.
// exclude rows where all columns = null
var rows = [];
var validRow;
for (var r = 0; r < view.getNumberOfRows(); r++) {
validRow = null;
for (var c = 1; c < view.getNumberOfColumns(); c++) {
validRow = validRow || view.getValue(r, c);
}
if (validRow !== null) {
rows.push(r);
}
}
view.setRows(rows);
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'S1');
data.addColumn('number', 'S2');
data.addColumn('number', 'S3');
data.addColumn('number', 'S4');
data.addColumn('number', 'S5');
data.addColumn('number', 'S6');
var rows = [
["Nov 2019", null, null, 92617.19, null, 92617.19, null],
["Dec 2019", null, null, 92617.19, null, 92617.19, null],
["Jan 2020", 3251.84, 16259.2, 92617.19, 2002.02, 94619.2, null],
["Feb 2020", 3251.84, 16259.2, 92617.19, 4004.03, 96621.22, null],
["Mar 2020", 6503.68, 32518.4, 92617.19, 8008.06, 100625.25, null],
["Apr 2020", 6503.68, 32518.4, 92617.19, 12012.1, 104629.28, null],
["May 2020", 6503.68, 32518.4, 83355.47, 16016.13, 99371.59, null],
["Jun 2020", 13007.36, 65036.81, 74093.75, 24024.19, 98117.94, null],
["Jul 2020", 13007.36, 65036.81, 64832.03, 32032.26, 96864.29, null],
["Aug 2020", 13007.36, 65036.81, 55570.31, 40040.32, 95610.63, null],
["Sep 2020", 13007.36, 65036.81, 46308.59, 48048.38, 94356.98, null],
["Oct 2020", 13007.36, 65036.81, 37046.87, 56056.45, 93103.32, null],
["Nov 2020", 13007.36, 65036.81, 18523.44, 64064.51, 82587.95, null],
["Dec 2020", 13007.36, 65036.81, 13892.58, 72072.58, 85965.15, null],
["Jan 2021", 13007.36, 65036.81, 11114.06, 80080.64, 91194.7, null],
["Feb 2021", null, null, null, 80080.64, null, 650368.08],
["Mar 2021", null, null, null, 80080.64, null, 637831.53],
["Apr 2021", null, null, null, 80080.64, null, 625294.99],
["May 2021", null, null, null, 80080.64, null, 612758.44],
["Jun 2021", null, null, null, 80080.64, null, 600221.89],
["Jul 2021", null, null, null, 80080.64, null, 587685.35],
["Aug 2021", null, null, null, 80080.64, null, 575148.8],
["Sep 2021", null, null, null, 80080.64, null, 562612.26],
["Oct 2021", null, null, null, 80080.64, null, 550075.71],
["Nov 2021", null, null, null, 80080.64, null, 537539.16],
["Dec 2021", null, null, null, 80080.64, null, 525002.62],
["Jan 2022", null, null, null, 80080.64, null, 512466.07],
["Feb 2022", null, null, null, 80080.64, null, 499929.52],
["Mar 2022", null, null, null, 80080.64, null, 487392.98],
["Apr 2022", null, null, null, 80080.64, null, 474856.43],
["May 2022", null, null, null, 80080.64, null, 462319.89],
["Jun 2022", null, null, null, 80080.64, null, 449783.34],
["Jul 2022", null, null, null, 80080.64, null, 437246.79],
["Aug 2022", null, null, null, 80080.64, null, 424710.25],
["Sep 2022", null, null, null, 80080.64, null, 412173.7],
["Oct 2022", null, null, null, 80080.64, null, 399637.15],
["Nov 2022", null, null, null, 80080.64, null, 387100.61],
["Dec 2022", null, null, null, 80080.64, null, 374564.06],
["Jan 2023", null, null, null, 80080.64, null, 362027.52],
["Feb 2023", null, null, null, 80080.64, null, 349490.97],
["Mar 2023", null, null, null, 80080.64, null, 336954.42],
["Apr 2023", null, null, null, 80080.64, null, 324417.88],
["May 2023", null, null, null, 80080.64, null, 311881.33],
["Jun 2023", null, null, null, 80080.64, null, 299344.78],
["Jul 2023", null, null, null, 80080.64, null, 286808.24],
["Aug 2023", null, null, null, 80080.64, null, 274271.69],
["Sep 2023", null, null, null, 80080.64, null, 261735.14],
["Oct 2023", null, null, null, 80080.64, null, 249198.6],
["Nov 2023", null, null, null, 80080.64, null, 236662.05],
["Dec 2023", null, null, null, 80080.64, null, 224125.51],
["Jan 2024", null, null, null, 80080.64, null, 211588.96],
["Feb 2024", null, null, null, 80080.64, null, 199052.41]
];
data.addRows(rows);
options = {
hAxis: {
title: '',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: '',
format: '$#,###'
},
title: "",
width: 800,
height: 500,
isStacked: "true",
pointSize: 5,
legend: {
position: 'bottom'
},
interpolateNulls: true,
vAxis: {
format: 'currency'
}
};
chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var columns = [];
var series = {};
for (var i = 0; i < data.getNumberOfColumns(); i++) {
columns.push(i);
if (i > 0) {
series[i - 1] = {};
}
}
options['series'] = series;
google.visualization.events.addListener(chart, 'select', function() {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row === null) {
var col = sel[0].column;
if (columns[col] == col) {
// hide the data series
columns[col] = {
label: data.getColumnLabel(col),
type: data.getColumnType(col),
calc: function() {
return null;
}
};
// grey out the legend entry
series[col - 1].color = '#CCCCCC';
} else {
// show the data series
columns[col] = col;
series[col - 1].color = null;
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
// exclude rows where all columns = null
var rows = [];
var validRow;
for (var r = 0; r < view.getNumberOfRows(); r++) {
validRow = null;
for (var c = 1; c < view.getNumberOfColumns(); c++) {
validRow = validRow || view.getValue(r, c);
}
if (validRow !== null) {
rows.push(r);
}
}
view.setRows(rows);
chart.draw(view, options);
}
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
NOTE: the jsfiddle is using an old version of google charts.
the jsapi loader is out of date and should no longer be used.
instead, use loader.js, this will only change the load statement.
see above snippet...