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:
- Scroll down the page you will notice that we have 45 rows with last row having time date "10 May 2018, 14:44:36"
- Scroll back up and click on "Select/Diselect All". You can scroll down the table to see that now we have 44 rows
- Either Click on "Select/Diselect All" or "record8". Scroll down the page to see that we still have 44 rows in the table
2 Answers
Answers 1
DataView Class
.hideColumns() Method
DataView Class is a special version of the DataTable Class. Its main purpose is to present a part(s) of the DataTable(s). OP code needs to toggle columns with the method that compliments
.setColumns() which is .hideColumns(). In Demo 1 below there is a ternary that toggles the columns from [0,...14] to [8...14] columns by using both set/hideColumns() methods. The table has 90 rows and it persists at 90 between toggling of columns.
Example
var dView = status === 'on' ? view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]) : view.hideColumns([0, 1, 2, 3, 4, 5, 6, 7]); ⭐ Demo 2 (located at the bottom of this post,) isn't a solution but it could help the OP code should you decide on not using Demo 1.
Demo 1
.as-console-wrapper.as-console-wrapper { max-height: 15px; color: red }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no"> <style> @import url('https://fonts.googleapis.com/css?family=Raleway'); html { height: 100%; width: 100%; font: 400 16px/1.1 Raleway; } body { position: relative; overflow: auto; } main { overflow: auto; } .btn { width: 11ch; font: inherit; } .btn.on::after { content: '\a0ON'; } .btn.off::after { content: '\a0OFF'; } .heavy { font-weight: 900; } .darkBkg { background: rgba(0, 0, 0, 0.4); color: #fff; } .active { background: rgba(200, 150, 20, 0.3); color: #000; } .tomato { color: tomato } .font { font-family: Raleway; } .right { text-align: right; } .big { font-size: 20px } </style> </head> <body> <main> <button class='btn off' type='button'>VIEW</button> <figure id='table'></figure> </main> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages': ['table'] }); google.charts.setOnLoadCallback(drawTable); var cssClassNames = { 'headerRow': 'heavy font', 'tableRow': '', 'oddTableRow': 'darkBkg', 'selectedTableRow': 'active', 'hoverTableRow': 'active', 'headerCell': 'font', 'tableCell': 'right font', 'rowNumberCell': 'big heavy tomato font' }; var options = { backgroundColor: { fill: 'transparent' }, allowHtml: true, showRowNumber: true, width: '100%', height: '100%', 'cssClassNames': cssClassNames }; $('.btn').on('click', function(e) { $(this).toggleClass('on off'); var status = $(this).hasClass('on') ? 'on' : 'off'; console.log(status); drawTable(status); }); function drawTable(status) { var data = new google.visualization.DataTable(); data.addColumn('date', 'START'); data.addColumn('date', 'END'); data.addColumn('string', 'DESC'); data.addColumn('number', '0'); data.addColumn('number', '1'); data.addColumn('number', '2'); data.addColumn('number', '3'); data.addColumn('number', '4'); data.addColumn('number', 'EXT 0'); data.addColumn('number', 'EXT 1'); data.addColumn('number', 'EXT 2'); data.addColumn('number', 'EXT 3'); data.addColumn('number', 'COL 0'); data.addColumn('number', 'COL 1'); data.addColumn('number', 'COL 2'); var time = new google.visualization.DateFormat({ formatType: 'short' }); data.addRows([ [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0], [new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1], [new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1], [new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0] ]); var table = new google.visualization.Table(document.getElementById('table')); var view = new google.visualization.DataView(data); var dView = status === 'on' ? view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]) : view.hideColumns([0, 1, 2, 3, 4, 5, 6, 7]); table.draw(view, options); } </script> <!--<script src='gvis-api.js'></script>--> </body> </html>⭐Although I strongly suggest that you use the
hideColumns() from Google Visualization API, I'd like to address this: "// delete by key because splice doesn't keep keys on delete "
splice() returns whatever it deletes. So you call on splice() and store its return in a var, const, array, object, etc.
Demo 2
var columnArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]; var removedArray = columnArray.splice(0, 8); console.log('Removed Column Array: ' + removedArray); console.log('Remaining Column Array: ' + columnArray); var restoredArray = removedArray.concat(columnArray); console.log('Restored Column Array: ' + restoredArray);Answers 2
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...
0 comments:
Post a Comment