Catagory filters resetting on data refresh ... also storage creep. Please help :)

62 views

Skip to first unread message

Michael Rooney

unread,

Nov 8, 2022, 3:54:38 PM11/8/22

to Google Visualization API

Hi esteemed colleagues:

I could really use your help and guidance on this one.

Hi esteemed colleagues:

I could really use your help and guidance on this one.

I'm trying to build the Dashboard so that any items selected under category filters : (manager/base/transport/status) remain intact and are re-applied after the setInterval

of 60 seconds trips and the $.ajax reloads a fresh copy of the data. In various attempts, I also notice a browser storage creep. I've played around with clearchart, but ended up undoing any progress made so far.

The filters should be removed only if

1. the "RESET" button is selected

2. the user manually deselects the checked items

3. the browser page is manually reloaded.

1) Not sure why this is reported in the console log ?

google.charts.load('current', { packages: ['corechart', 'controls'] });

Attempting to load version '51' of Google Charts, but the previously loaded 'current' will be used instead.

2) main 2 issues:

a. from DB category filter

select: TP_I4X1,TP_T1FR

... selected items are blank.

after the 60-second setInterval draw chart, the variables are still set (as I would expect)

but the dashboard does not reflect the selected items with the refreshed data.

b. fixing the storage creep issue in the browser because I'm calling the repetitive code.

I hope this makes sense. If you have a working fiddle example that I could see, I'd be grateful so I can see what I'm missing. I'm sure I'm not the first trying to accomplish a task like this and I think a sample like this would be very useful to the community.

Thank you in advance and best regards,

Michael

https://jsfiddle.net/#&togetherjs=VNg37FFsbf

Michael Rooney

unread,

Nov 9, 2022, 12:30:21 AM11/9/22

to Google Visualization API

For some reason jsfiddle.net is not saving.

<!DOCTYPE html>

<head>

<title> DEVL transport Dashboard </title>

// Load the Visualization API and the controls package.

google.charts.load('current', { packages: ['corechart', 'controls'] });

let selectedVals1, selectedVals2, selectedVals3, selectedVals4;

var managerFilter, baseFilter, transportFilter, statusFilter, chart,

initState1, initState2, initState3, initState4, state, row, view;

var firstTime = true;

var jsonData = {

"cols": [{ "id": "", "label": "manager", "pattern": "", "type": "string" },

{ "id": "", "label": "base", "pattern": "", "type": "string" },

{ "id": "", "label": "group", "pattern": "", "type": "string" },

{ "id": "", "label": "transport", "pattern": "", "type": "string" },

{ "id": "", "label": "trouble", "pattern": "", "type": "string" },

{ "id": "", "label": "status", "pattern": "", "type": "string" }

"rows": [

{ "c": [{ "v": "TP_I1X1" }, { "v": "TP_I1X1_2022-01-25_09.40.57" }, { "v": "DELTA.X1" }, { "v": "TO.TP_I1X1.CLH" }, { "v": "NO" }, { "v": "RUNNING" }] },

{ "c": [{ "v": "TP_I4X1" }, { "v": "TP_I4X1_2022-01-25_09.41.47" }, { "v": "DELTA.X1" }, { "v": "TO.TP_I4X1.CLH" }, { "v": "NO" }, { "v": "INACTIVE" }] },

{ "c": [{ "v": "TP_T1FR" }, { "v": "TP_T1FR_2019-03-04_13.33.40" }, { "v": "DELTA.X1" }, { "v": "TO.TP_T1FR.CLH" }, { "v": "NO" }, { "v": "INACTIVE" }] },

{ "c": [{ "v": "TP_T1X2" }, { "v": "TP_T1X2_2020-01-14_11.02.42" }, { "v": "PHETA_VET_IGAMAD" }, { "v": "TO.TP_T1X2" }, { "v": "NO" }, { "v": "INACTIVE" }] },

{ "c": [{ "v": "TP_T1X2" }, { "v": "TP_T1X2_2020-01-14_11.02.42" }, { "v": "PHETA_VET_IGAMAD" }, { "v": "TO.TP_T1X2" }, { "v": "NO" }, { "v": "RETRYING" }] },

{ "c": [{ "v": "TP_T1X2" }, { "v": "TP_T1X2_2020-01-14_11.02.44" }, { "v": "PHETA_VET_ALPHAZ" }, { "v": "TO.TP_T1X2" }, { "v": "NO" }, { "v": "INACTIVE" }] },

{ "c": [{ "v": "TDDELTA1" }, { "v": "TDDELTA1_2019-04-02_21.14.42" }, { "v": "PHETA_VET_RTD" }, { "v": "TO.ASATURNA_VAS" }, { "v": "NO" }, { "v": "INACTIVE" }] }

]

}

alert('b4 drawChart ' + selectedVals1);

function drawChart() {

if (firstTime) {

firstTime = false;

initState1 = { selectedValues: [] };

initState2 = { selectedValues: [] };

initState3 = { selectedValues: [] };

initState4 = { selectedValues: [] };

}

// alert('aft drawChart ' + selectedVals1);

/* using the had coded values for test but ajax to grab dynamic data.

var jsonData = $.ajax({

url: "https:myurl",

crossDomain: true,

dataType: "module",

async: false

//data: {

// format: 'json'

//}

}).responseText;

// var data = google.visualization.arrayToDataTable(jsonData);

//var data = new google.visualization.DataTable(JSON.parse(jsonData));

var data = new google.visualization.DataTable(jsonData);

// Add view used just for RETRYING

var columnsTable = new google.visualization.DataTable(data);

columnsTable.addColumn('number', 'colIndex');

columnsTable.addColumn('string', 'colLabel');

// var initState = { selectedValues: [] };

// put the columns into this data table (skip column 0)

for (var i = 1; i < data.getNumberOfColumns(); i++) {

columnsTable.addRow([i, data.getColumnLabel(i)]);

// you can comment out this next line if you want to have a default selection other than the whole list

// initState.selectedValues.push(data.getColumnLabel(i));

}

var myView = new google.visualization.DataView(data);

myView.setRows(myView.getFilteredRows([{ column: 5, value: 'RETRYING' }]));

var dataResultCnt = myView.getNumberOfRows();

if (dataResultCnt === null || dataResultCnt == 0) {

dataResultCnt = 0;

changeBodyBg('lightblue');

} else if (dataResultCnt > 0) {

changeBodyBg('yellow');

}

document.getElementById("totRetry").innerHTML = dataResultCnt;

function changeBodyBg(color) {

document.body.style.background = color;

}

managerFilter = new google.visualization.ControlWrapper({

controlType: 'CategoryFilter',

containerId: 'picker1',

//dataTable: data,

width: '100%',

height: '99%',

options: {

filterColumnLabel: 'manager',

ui: {

labelStacking: 'vertical',

selectedValuesLayout: 'belowStacked',

allowTyping: 'false',

allowMultiple: 'true',

allowNone: 'true',

sortValues: 'true',

}

state: initState1

});

baseFilter = new google.visualization.ControlWrapper({

controlType: 'CategoryFilter',

containerId: 'picker2',

// dataTable: columnsTable,

width: '100%',

options: {

filterColumnLabel: 'base',

ui: {

labelStacking: 'vertical',

selectedValuesLayout: 'belowStacked',

allowTyping: 'true',

allowNone: 'true',

allowMultiple: 'true',

}

// state: initState2

});

transportFilter = new google.visualization.ControlWrapper({

controlType: 'CategoryFilter',

containerId: 'picker3',

// dataTable: columnsTable,

width: '100%',

options: {

filterColumnLabel: 'transport',

ui: {

labelStacking: 'vertical',

selectedValuesLayout: 'belowStacked',

allowTyping: 'true',

allowNone: 'true',

allowMultiple: 'true',

}

// state: initState2

});

statusFilter = new google.visualization.ControlWrapper({

controlType: 'CategoryFilter',

containerId: 'picker4',

width: '100%',

options: {

filterColumnLabel: 'status',

ui: {

labelStacking: 'vertical',

selectedValuesLayout: 'belowStacked',

allowTyping: 'true',

allowNone: 'true',

allowMultiple: 'true',

}

// state: initState2

});

// Define a table

chart = new google.visualization.ChartWrapper({

chartType: 'Table',

containerId: 'chart1',

options: {

title: 'TEST',

allowHtml: 'true',

allowNone: 'true',

allowMultiple: 'true',

width: '100%',

height: '99%',

}

});

// Create the dashboard.

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).

bind([managerFilter, baseFilter, transportFilter, statusFilter], [chart]);

google.visualization.events.addListener(dashboard, 'ready', function () {

// get number of rows - This counts for only selected .... currenly filtered total count

var totalRows = chart.getDataTable().getNumberOfRows();

document.getElementById("totRowCnt").innerHTML = totalRows;

});

//* Filtered rows for managerFilter

google.visualization.events.addListener(managerFilter, 'statechange', function () {

alert('b4 getstate ' + selectedVals1);

selectedVals1 = managerFilter.getState().selectedValues;

initState1 = { selectedValues: [selectedVals1] };

// alert(selectedVals1); //<-- This is the filtered rows

managerFilter.setState({ 'selectedValues': [selectedVals1] });

alert('aft setstate ' + selectedVals1);

managerFilter.draw();

//chart.draw();

});

//* Filtered rows for baseFilter

google.visualization.events.addListener(baseFilter, 'statechange', function () {

selectedVals2 = baseFilter.getState().selectedValues;

// alert(selectedVals1); //<-- This is the filtered rows

baseFilter.setState({ 'selectedValues': [selectedVals2] });

baseFilter.draw();

});

//* Filtered rows for transportFilter

google.visualization.events.addListener(transportFilter, 'statechange', function () {

selectedVals3 = transportFilter.getState().selectedValues;

// alert(selectedVals1); //<-- This is the filtered rows

transportFilter.setState({ 'selectedValues': [selectedVals3] });

transportFilter.draw();

});

//* Filtered rows for statusFilter

google.visualization.events.addListener(statusFilter, 'statechange', function () {

selectedVals4 = statusFilter.getState().selectedValues;

// alert(selectedVals1); //<-- This is the filtered rows

statusFilter.setState({ 'selectedValues': [selectedVals4] });

statusFilter.draw();

});

//function resetPickers() {

var reset = document.getElementById('resetButton');

reset.addEventListener('click', function () {

baseFilter.setState({ selectedValues: [] });

managerFilter.setState({ selectedValues: [] });

transportFilter.setState({ selectedValues: [] });

statusFilter.setState({ selectedValues: [] });

baseFilter.draw();

managerFilter.draw();

transportFilter.draw();

statusFilter.draw();

}, false);

function setChartView() {

// var state = baseFilter.getState();

// var row;

var view = {

columns: [0, 1, 2, 3, 4, 5]

};

view.columns.sort(function (a, b) {

return (a - b);

});

chart.setView(view);

chart.draw();

}

google.visualization.events.addListener(baseFilter, 'statechange', setChartView);

var runOnce = google.visualization.events.addListener(dashboard, 'ready', function () {

google.visualization.events.removeListener(runOnce);

setChartView();

});

// selectedVals1 = managerFilter.getState().selectedValues;

alert('b4 draw db' + selectedVals1);

function setChartView() {

state = managerFilter.getState();

row;

view = {

columns: [0, 1, 2, 3, 4, 5]

};

// for (var i = 1; i < state.selectedValues.length; i++) {

// row = columnsTable.getFilteredRows([{ column: 0, value: state.selectedValues[i] }])[0];

// view.columns.push(columnsTable.getValue(row, 0));

// }

// sort the indices into their original order

view.columns.sort(function (a, b) {

return (a - b);

});

chart.setView(view);

chart.draw();

}

google.visualization.events.addListener(managerFilter, 'statechange', setChartView);

setChartView();

managerFilter.draw();

baseFilter.draw();

transportFilter.draw();

statusFilter.draw();

dashboard.draw(data);

managerFilter.setState({ selectedValues: [selectedVals1] });

managerFilter.draw();

managerFilter.setState({ selectedValues: [selectedVals1] });

baseFilter.setState({ selectedValues: [selectedVals2] });

transportFilter.setState({ selectedValues: [selectedVals3] });

statusFilter.setState({ selectedValues: [selectedVals4] });

// managerFilter.draw();

// baseFilter.draw();

// transportFilter.draw();

// statusFilter.draw();

// dashboard.draw(data);

setInterval(function () { drawChart(); }, 60000);

}

//Set a callback to run when the Google Visualization API is loaded. Runs the drawVisualization function

google.setOnLoadCallback(drawChart);

</script>

</head>

<h3>

<center> DEVL transport Dashboard </center>

</h3>

<tr>

<td>

<bold>Controls:</bold>

</legend>

</Form>

</fieldset>

</td>

<td>

<table>

<tr>

<th>Selected rows: </th>

<td>

</td>

<th>

</th>

<th>Retry's: </th>

<td>

</td>

</tr>

</table>

</td>

</table>

</tr>

</td>

</tr>

</table>

</div>

</body>

</html>

Reply all

Reply to author

Forward

0 new messages