google visualization chart is not displaying one of the legend text - google-visualization

Question

google chart is not displaying one of the legend text, But the data is populated. I have given column name as "Errors" for the not displayed legend. Does it have any impact for this behavior?
function drawTrendChart() {
var trendValues = trendTableChart.getDataTable();
if (trendValues.getNumberOfRows() <= 0) {
document.getElementById('trendTableChart').style.display = 'none';
document.getElementById('trendChart').style.display = 'none';
return;
}
var noOfRows = parseInt(trendValues.getNumberOfRows());
var trendValuesChart = new google.visualization.Table(document.getElementById('trendValuesChart'));
trendValuesChart.draw(trendValues);
noOfRows = trendValues.getNumberOfRows();
var trendTable = new google.visualization.DataTable();
trendTable.addColumn('string', 'Execution Date');
trendTable.addColumn('number', 'PASSED');
trendTable.addColumn({ type: 'string', role: 'annotation' });
trendTable.addColumn({ type: 'string', role: 'tooltip' });
trendTable.addColumn('number', 'FAILED');
trendTable.addColumn({ type: 'string', role: 'annotation' });
trendTable.addColumn({ type: 'string', role: 'tooltip' });
trendTable.addColumn('number', 'ERRORS');
trendTable.addColumn({ type: 'string', role: 'annotation' });
trendTable.addColumn({ type: 'string', role: 'tooltip' });
trendTable.addColumn('number', 'SKIPPED');
trendTable.addColumn({ type: 'string', role: 'annotation' });
trendTable.addColumn({ type: 'string', role: 'tooltip' });
/* - New Code for Team in tooltip*/
trendTable.addColumn('number', 'Team');
trendTable.addColumn({ type: 'string', role: 'tooltip' });
/* ends here*/
trendChart.getOptions().series = {
0: { 'type': 'bars', 'targetAxisIndex': 0, 'isStacked': true },
1: { 'type': 'bars', 'targetAxisIndex': 0, 'isStacked': true },
2: { 'type': 'bars', 'targetAxisIndex': 0, 'isStacked': true },
3: { 'type': 'bars', 'targetAxisIndex': 0, 'isStacked': true },
4: { 'type': 'bars', 'targetAxisIndex': 0, 'visibleInLegend': false }
};
trendChart.getOptions().colors = ["#53A14B", "#F09885", "#900C3F","#FFC300","#FFFFFF"];
var rowObj = new Array();
var seek = 0 * 1; var pValue = 0 * 1;
var rowCounter;
for (rowCounter = 0; rowCounter < noOfRows; rowCounter++) {
seek = 0 * 1;
var dateValue = trendValues.getValue(rowCounter, 0);
rowObj[seek++] = formatMySqlDateFormat(dateValue);
var currentTotal = trendValues.getValue(rowCounter, 5);
currentTotal = currentTotal.toFixed(0);
if (trendValues.getColumnLabel(6) === 'Passed') {
pValue = (trendValues.getValue(rowCounter, 6) / currentTotal).toFixed(4) * 1;
rowObj[seek++] = pValue;
rowObj[seek++] = trendValues.getValue(rowCounter, 6).toFixed(0);
rowObj[seek++] = trendValues.getValue(rowCounter, 6).toFixed(0) + ' of ' + currentTotal + ' ~(' + ((pValue) * 100).toFixed(2) * 1 + '%)';
}
else {
rowObj[seek++] = null;
rowObj[seek++] = null;
rowObj[seek++] = null;
}
if (trendValues.getColumnLabel(7) === 'Failed') {
pValue = (trendValues.getValue(rowCounter, 7) / currentTotal).toFixed(4) * 1;
rowObj[seek++] = pValue;
rowObj[seek++] = trendValues.getValue(rowCounter, 7).toFixed(0) + '';
rowObj[seek++] = trendValues.getValue(rowCounter, 7).toFixed(0) + ' of ' + currentTotal + ' ~(' + ((pValue) * 100).toFixed(2) * 1 + '%)';
}
else {
rowObj[seek++] = null;
rowObj[seek++] = null;
rowObj[seek++] = null;
}
if (trendValues.getColumnLabel(8) === 'Errors') {
pValue = (trendValues.getValue(rowCounter, 8) / currentTotal).toFixed(4) * 1;
rowObj[seek++] = pValue;
rowObj[seek++] = trendValues.getValue(rowCounter, 8).toFixed(0) + '';
rowObj[seek++] = trendValues.getValue(rowCounter, 8).toFixed(0) + ' of ' + currentTotal + ' ~(' + ((pValue) * 100).toFixed(2) * 1 + '%)';
}
else {
rowObj[seek++] = null;
rowObj[seek++] = null;
rowObj[seek++] = null;
}
if (trendValues.getColumnLabel(9) === 'Skipped') {
pValue = (trendValues.getValue(rowCounter, 9) / currentTotal).toFixed(4) * 1;
rowObj[seek++] = pValue;
rowObj[seek++] = trendValues.getValue(rowCounter, 9).toFixed(0) + '';
rowObj[seek++] = trendValues.getValue(rowCounter, 9).toFixed(0) + ' of ' + currentTotal + ' ~(' + ((pValue) * 100).toFixed(2) * 1 + '%)';
}
else {
rowObj[seek++] = null;
rowObj[seek++] = null;
rowObj[seek++] = null;
}
/* code for team in tooltip*/
if (trendValues.getColumnLabel(1) === 'Project') {
rowObj[seek++] = 0;
rowObj[seek++] = trendValues.getValue(rowCounter, 1);
}
else {
rowObj[seek++] = null;
rowObj[seek++] = null;
}
trendTable.addRow(rowObj);
}
var formatterMedium = new google.visualization.DateFormat({ formatType: 'medium' });
formatterMedium.format(trendTable, 0);
trendTable.setColumnLabel(7, "");
trendChart.setDataTable(trendTable);
trendChart.draw();
var errorObjectContainer = document.getElementById("suiteFilter");
var errorObjectDiv = errorObjectContainer.getElementsByTagName("div");
var errorObject = errorObjectDiv[1].getElementsByTagName("span");
if (errorObject) {
for (rowCounter = 0; rowCounter < errorObject.length; rowCounter++) {
errorObject[rowCounter].style.display = 'none';
}
}
}
handleTrendResponse.drawTrendChart = drawTrendChart;
Legend populated in the graph

Answer 1

here, the table is created and columns added...
var trendTable = new google.visualization.DataTable();
trendTable.addColumn('string', 'Execution Date'); // 0
trendTable.addColumn('number', 'PASSED'); // 1
trendTable.addColumn({ type: 'string', role: 'annotation' }); // 2
trendTable.addColumn({ type: 'string', role: 'tooltip' }); // 3
trendTable.addColumn('number', 'FAILED'); // 4
trendTable.addColumn({ type: 'string', role: 'annotation' }); // 5
trendTable.addColumn({ type: 'string', role: 'tooltip' }); // 6
trendTable.addColumn('number', 'ERRORS'); // 7
trendTable.addColumn({ type: 'string', role: 'annotation' });
trendTable.addColumn({ type: 'string', role: 'tooltip' });
trendTable.addColumn('number', 'SKIPPED');
trendTable.addColumn({ type: 'string', role: 'annotation' });
trendTable.addColumn({ type: 'string', role: 'tooltip' });
later, before the chart is drawn, the column label is removed, hence a blank legend entry...
trendTable.setColumnLabel(7, ""); // <-- remove this
trendChart.setDataTable(trendTable);
trendChart.draw();