Google Charts is not displaying last row in the data array?

Question

I have data array with 45 rows but only 44 rows are visible on the screen after I am hide columns between 8 and 14 using "setColumns" and then re-enable any of the columns between 8 and 14:

The 45th row has following data:

0:{wf: "10 May 2018, 14:44:36"}
1:{wf: ""}
2:{wf: ""}
3:{wf: ""}
4:{wf: ""}
5:{wf: ""}
6:{wf: ""}
7:{wf: ""}
8:{wf: "69.9"}
9:{wf: "73.2"}
10:{wf: "65.2"}
11:{wf: "73.2"}
12:{wf: "82.8"}
13:{wf: "0"}
14:{wf: "28.6"}

To perform column toggle I use following commands:

    performColumnToggle: function (col)
    {
        // use original unfiltered data
        _view = new google.visualization.DataView(_original_data);

        // get a key due to splice not keeping keys one delete
        var key = $.inArray(col, _toggledColumns);

        if (_columns[col]['status'] === 1) {
            _columns[col]['status'] = 0;
            // delete by key because splice doesn't keep keys on delete 
            _toggledColumns.splice(key, 1);

        } else {
            _columns[col]['status'] = 1;
            // insert new items with a key and push other columns
            _toggledColumns.splice(col, 0, col);
        }
        // set columns to display
        _view.setColumns(_toggledColumns);
        console.log(_chart.getDataTable().getNumberOfRows()); // keeps returns 44 rather then 45.
        _dashboard.draw(_view);
    }

---

I set _original_data when I first initiate the chart and when I have to update the data in the chart. When I perform console.log(_original_data) I see all 45 rows.

    init_chart: function ()
    { 
        _data = new google.visualization.DataTable(_tableData);
        _original_data = _data;

        // some other code ....
    }

    updateData: function ()
    { 
        _tableData = data;
        _data = new google.visualization.DataTable(_tableData);
        _original_data = _data;

        // some other code ....
    }

---

Below is an example code

https://jsfiddle.net/Spiker/g0k714h7/

To trigger error take following steps:

1. Scroll down the page you will notice that we have 45 rows with last row having time date "10 May 2018, 14:44:36"
2. Scroll back up and click on "Select/Diselect All". You can scroll down the table to see that now we have 44 rows
3. Either Click on "Select/Diselect All" or "record8". Scroll down the page to see that we still have 44 rows in the table

Answer 1

the problem appears to occur in function --> switchOffAllColumns

there must be some sort of bug with the view

setting the view columns on the ChartWrapper, rather than the DataView,
corrects the issue

in switchOffAllColumns, change the following line...

_view.setColumns(_toggledColumns);

to...

_chart.setView({
  columns: _toggledColumns
});

see following working fiddle...

https://jsfiddle.net/WhiteHat/o0j70y9r/

note: jsapi should no longer be used, changed above fiddle to use loader.js load statement...