.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>