Below is a Google dashboard featuring filtering, sorting, and paging functionality.
I need to programmatically modify the sourceData and refresh the Google visualization from outside its containing function. The challenge is accessing the visualization from a function like outsideGV.
Normally, I would call table.draw(); within renderChart_onPageLoad to redraw the visualization, but accessing it from outsideGV is proving tricky. I must ensure that user selections for paging, sorting, and filtering are maintained during refreshes.
Attempts to recall the renderChart_onPageLoad function resulted in a complete reset of user inputs, erasing all previous selections.
Your feedback would be greatly appreciated.
UPDATE: It's unlikely that there will be a single variable (data, for example) on a page. I have a dedicated data variable for each chart on the page.
Multiple Google tables are drawn on the page by the drawDashboard_ function. Is it feasible to compile references to these tables in a global array?
const globalReferences = [];
I aim to populate this array as each drawDashboard_ function is executed. Can these references be collected after all variables are created?
globalReferences.push({
"chartID": suffix, //unique identifier for each function pass
"data": data,
"dashboard": dashboard,
"categoryPicker": categoryPicker,
"proxyTable": proxyTable,
"table": table
});
Is it possible to then reference this array to access a specific chart?
globalReferences[0].table;
//retrieve the reference, make changes, and redraw.
google.charts.load('current', {
'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});
var listenerPage = {};
var listenerSort = {};
var sourceData = [
['Name', 'RoolNumber', 'Gender', 'Age', 'DonutsEaten'],
['Michael', 1, 'Male', 12, 5],
['Elisa', 2, 'Female', 20, 7],
['Robert', 3, 'Male', 7, 3],
['John', 4, 'Male', 54, 2],
['Jessica', 5, 'Female', 22, 6],
['Aaron', 6, 'Male', 3, 1],
['Margareth', 7, 'Female', 42, 8],
['Miranda', 8, 'Female', 33, 6]
]
$(document).ready(function() {
renderChart_onPageLoad();
});
function referenceGV() {
//ON BUTTON CLICK
//1 UPDATD sourceData - Make a change programatically
//1 REFRESH GV
// must retaining all selected user filtering, sorting, paging
}
function renderChart_onPageLoad() {
google.charts.setOnLoadCallback(function() {
drawDashboard_A("A");
});
}
function drawDashboard_A(suffix) {
var data = google.visualization.arrayToDataTable(sourceData);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_' + suffix));
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'categoryPicker_' + suffix,
options: {
filterColumnLabel: 'Gender',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false
}
}
});
var proxyTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'proxyTable_' + suffix,
options: {
width: '500px'
}
});
... (Content truncated for brevity) ...
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dashboardA">
<div id="categoryPicker_A"></div><br />
<div id="proxyTable_A" style="display:none;"></div>
<div id="table_A"></div><br /><br />
</div>
<button onclick="referenceGV()">
referenceGV
</button>