I finally got it figured out. Column charts cannot change the number of
columns. I had to build the view with hidden columns. Thanks for taking a
look at this Alvin!
Here is my new helper function:
//returns a view with hidden columns
//expects a Google Charts dataTable and an array of indexes of the desired
columns to show
function buildViewWithSpecifiedColumns(dataTable, visibleIndexes) {
const totalCols = dataTable.getNumberOfColumns();
const viewColumns = [];
for (let i = 0; i < totalCols; i++) {
if (visibleIndexes.includes(i)) {
viewColumns.push(i);
} else { //the column should be hidden
viewColumns.push({
type: dataTable.getColumnType(i),
label: dataTable.getColumnLabel(i),
calc: () => null
});
}
}
const view = new google.visualization.DataView(dataTable);
view.setColumns(viewColumns);
return view;
}
Here is the updated code to redraw the chart:
//logic to show/hide columns when clicking on the legend
google.visualization.events.addListener(chart0, 'select', function () {
var sel = chart0.getChart().getSelection();
if ( sel.length > 0 ) { //either a legend item or a chart element has
been selected
if ( sel[0].row === null ) { //legend has been clicked
var selectedCol = sel[0].column;
//toggle column visibility in the activeColumns array
var indexInactive = activeColumns.indexOf(selectedCol); //get the
index in the array for the selected column
if (indexInactive > -1) { //if it is -1 it was not in the active
columns array
activeColumns.splice(indexInactive, 1); //remove if present (hide)
} else {
insertSorted(activeColumns, selectedCol); //add column if not
present (show)
}
}
} // else //an element in the chart has been deselected
const view = buildViewWithSpecifiedColumns(grouped_data, activeColumns);
chart0.setDataTable(view);
chart0.draw();
});
On Wednesday, July 30, 2025 at 10:17:02 AM UTC-5 Alvin Galit wrote:
> Are you able to share your whole code?
>
> On Wednesday, July 30, 2025 at 8:10:15 AM UTC-7 Gavin Dundee wrote:
>
>> It really doesn't work. I truly am puzzled by this. I am a newbie to
>> this though.
>>
>> On Wednesday, July 30, 2025 at 9:47:55 AM UTC-5 Alvin Galit wrote:
>>
>>> [0,1, 2] doesn't work? Index starts at [0] and since you have 3 columns,
>>> I thought maybe that should be working.
>>> It makes sense that [0, 1, 3] doesn't work because you only have 3
>>> columns and so the 3rd column is at index [2].
>>>
>>> On Wednesday, July 30, 2025 at 7:33:55 AM UTC-7 Gavin Dundee wrote:
>>>
>>>> With array inputs:
>>>> [0,1,2]
>>>> or
>>>> [0,1,3]
>>>>
>>>> I usually get an error like this:
>>>> Invalid column index 3. Should be an integer in the range [0-2].
>>>>
>>>> If I set the array to:
>>>> [0,1,2,3]
>>>> I get all three columns per row.
>>>>
>>>> I am still at a loss. Any help would be greatly appreciated! :)
>>>>
>>>> On Tuesday, July 29, 2025 at 5:02:11 PM UTC-5 Gavin Dundee wrote:
>>>>
>>>>> I am seeking help. Here is my datatable setup:
>>>>> var grouped_data = google.visualization.data.group(
>>>>> proxyDataTable,
>>>>> [yearIndex],
>>>>> [
>>>>> {'column': sschIndex, 'aggregation': google.visualization.data.
>>>>> sum, 'type':'number'},
>>>>> {'column': enrollmentsIndex, 'aggregation': google.visualization
>>>>> .data.sum, 'type':'number'},
>>>>> {'column': crnIndex, 'aggregation': google.visualization.data.
>>>>> count, 'type':'number'}
>>>>> ]
>>>>> );
>>>>>
>>>>> Now I am creating a view:
>>>>> var view = new google.visualization.DataView(grouped_data);
>>>>>
>>>>> Then I draw the view:
>>>>> view.setColumns([[0,1],[0,1],[0,1]]);
>>>>> chart0.setDataTable(view);
>>>>> chart0.draw();
>>>>>
>>>>> My issue is with setColumns(). There are 3 columns being displayed.
>>>>> I thought I would be able to use this code:
>>>>> view.setColumns([1,2]);
>>>>> To display only columns 1 and 2 and not show column 3. My assumption
>>>>> is that [1,2,3] would show all the columns, but that does not work
>>>>> either.
>>>>> I am not sure where to go from here I have tried setColumns with many
>>>>> different arrays, but I am just guessing at this point. Can anyone help
>>>>> determine how I could hide a column using setColumns?
>>>>>
>>>>> I attached a screenshot of what my chart looks like.
>>>>>
>>>>> Thanks in advance for any help!!
>>>>>
>>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion visit
https://groups.google.com/d/msgid/google-visualization-api/4a55a0f1-005f-4d28-a3d9-0dc24276d9abn%40googlegroups.com.
