Fix datatable scrollbars, and handle window resizes correctly.
If you set gviz's options.height property - even, ironically, if you set it
redundantly to the height of the container, which ought to have been obvious
- then gviz will make the headers fixed at the top of the container even
when you're scrolling, which is what we want (ie. like "freeze rows" in a
spreadsheet).
We also add a listener on resize events and elegantly auto-resize the chart
or table when it happens.
diff --git a/render.html b/render.html
index 669ae78..d71eed7 100644
--- a/render.html
+++ b/render.html
@@ -22,8 +22,13 @@
div#editmenu a:hover {
background: #aaa;
}
- #vizchart {
+ #vizchart, #viztable {
+ position: relative;
overflow: hidden;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
}
#vizlog {
white-space: pre;
diff --git a/render.js b/render.js
index 73cf9a9..4673ce1 100644
--- a/render.js
+++ b/render.js
@@ -1239,7 +1239,7 @@
function addRenderers(queue, args) {
var trace = args.get('trace');
var chartops = args.get('chart');
- var t, datatable;
+ var t, datatable, resizeTimer;
var options = {};
var intensify = args.get('intensify');
if (intensify == '') {
@@ -1249,6 +1249,13 @@
intensify: intensify
};
+ var el;
+ if (chartops) {
+ el = document.getElementById('vizchart');
+ } else {
+ el = document.getElementById('viztable');
+ }
+
enqueue(queue, 'gentable', function(grid, done) {
if (chartops) {
var chartbits = chartops.split(',');
@@ -1262,7 +1269,6 @@
grid = fillNullsWithZero(grid);
}
grid = limitDecimalPrecision(grid);
- var el = document.getElementById('vizchart');
if (args.get('title')) {
options.title = args.get('title');
}
@@ -1316,20 +1322,15 @@
} else {
throw new Error('unknown chart type "' + charttype + '"');
}
- $(el).height(window.innerHeight);
gridoptions.show_only_lastseg = true;
gridoptions.bool_to_num = true;
} else {
- var el = document.getElementById('viztable');
t = new google.visualization.Table(el);
gridoptions.allowHtml = true;
options.allowHtml = true;
}
datatable = dataToGvizTable(grid, gridoptions);
- var wantwidth = trace ? window.innerWidth - 40 : window.innerWidth;
- $(el).width(wantwidth);
-
var dateformat = new google.visualization.DateFormat({
pattern: 'yyyy-MM-dd'
});
@@ -1349,9 +1350,19 @@
enqueue(queue, chartops ? 'chart=' + chartops : 'view',
function(grid, done) {
if (grid.data.length) {
- t.draw(datatable, options);
+ var doRender = function() {
+ var wantwidth = trace ? window.innerWidth - 40 : window.innerWidth;
+ $(el).width(wantwidth);
+ $(el).height(window.innerHeight);
+ options.height = window.innerHeight;
+ t.draw(datatable, options);
+ }
+ doRender();
+ $(window).resize(function() {
+ clearTimeout(resizeTimer);
+ resizeTimer = setTimeout(doRender, 200);
+ });
} else {
- var el = document.getElementById('vizchart');
el.innerHTML = 'Empty dataset.';
}
done(grid);
