I have multiple tables on one page that were loading without any problems
and now they have disappeared and I can't figure out why.
Each table is being called with a query. The idea is that each table will
be a dashboard of it's own with multiple controls using the data that I
have queried. Tables 2 and 3 will eventually be built up to look like Table
1. I have buttons that redraw tables on click (example: like hiding and
unhiding columns or refreshing) which is why the div names are shared. Am I
doing too much?
*Background:* Not sure if this is helpful, but I'm creating almost a case
management dashboard where we add "records" to a sheet a google form.
Currently I have it in one master sheet that I filter out into different
tabs. This has caused many issues so I wanted to push it into a web app as
a table for each category. There they can touch the table without
disrupting the formulas. I'm very new to this so any advice or
recommendations would be appreciated. I'm sure there's an easier way to
achieve this than what I have coded.
google.load("visualization", '1', {packages:['table','controls'], callback:
drawTable});
google.setOnLoadCallback(drawTable);
function drawTable() {
var queryNew = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
queryNew.setQuery('where D = "New Hire"');
queryNew.send(handleQueryResponse1);
var queryTerms = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=0');
queryTerms.setQuery('where D = "Termination"');
queryTerms.send(handleQueryResponse2);
var queryTrans = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1bSBHImAWvtB5lI7-tU7HKYfDBXi0Rzoj3bNXhhXJ63U/gviz/tq?gid=1145683023');
queryTrans.send(handleQueryResponse3);
}
Table 1
function handleQueryResponse1(response) {
var data = response.getDataTable();
var cssClassNames = {
'headerRow': '',
'tableRow': '',
'oddTableRow': '',
'selectedTableRow': '',
'hoverTableRow': '',
'headerCell': '',
'tableCell': '',
'rowNumberCell': ''};
var dashboard1 = new google.visualization.Dashboard(
document.getElementById('dashboardnew_div'));
// Table Views
var table1 = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'newhire_div',
options: {
showRowNumber: false,
allowHtml: true,
cssClassNames: cssClassNames,
page: 'enable',
pageSize: 25,
width: '100%'
},
view: {
columns: [12, 1, 4, 3, 2, 5, 6, 7, 8, 9, 10, 11, 13]
}
});
var table2 = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'newhire_div',
options: {
showRowNumber: false,
allowHtml: true,
cssClassNames: cssClassNames,
page: 'enable',
pageSize: 25,
width: '100%'
},
view: {
columns: [12, 1, 4, 3, 2, 5, 6, 7, 8, 9, 10, 11, 13, 14]
}
});
// Formatters
var salary = new google.visualization.NumberFormat({prefix: '$'});
salary.format(data, 10); // Apply formatter to second column
// var className = 'google-visualization-table-table';
// $('.'+className).removeClass(className);
// Controls
var stringFilter1 = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'stringnew_filter_div',
options: {
filterColumnIndex: 4,
matchType: 'any',
ui: {
label: 'Search by Employee',
labelStacking: 'vertical',
cssClass: 'searchClass'
}
}
});
var locationFilter1 = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'locationnew_filter_div',
options: {
filterColumnIndex: 1,
ui: {
label: 'Filter by Location',
labelStacking: 'vertical',
cssClass: 'locationClass'
}
}
});
// Buttons
var refresh = document.getElementById('b1');
refresh.onclick = function() {
drawTable();
}
var hide = document.getElementById("b2");
hide.onclick = function() {
dashboard1.bind([stringFilter1, locationFilter1], [table2])
dashboard1.draw(data);
}
// Draw Dashboard
dashboard1.bind([stringFilter1, locationFilter1], [table1])
dashboard1.draw(data);}
Tables 2 and 3
function handleQueryResponse2(response) {
var data = response.getDataTable();
var table4 = new
google.visualization.Table(document.getElementById('benefits_div'));
table4.draw(data);
}
function handleQueryResponse3(response) {
var data = response.getDataTable();
var table4 = new
google.visualization.Table(document.getElementById('transfers_div'));
table4.draw(data);
}
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/40fc986f-936a-4591-b073-1dbb7676ef90%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
