For some reason jsfiddle.net is not saving.
<!DOCTYPE html>
<head>
<title> DEVL transport Dashboard </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--Load the AJAX API-->
<script type="text/javascript" src="
https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript" src="
https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js";></script>
<script type="text/javascript">
// 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,
// 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>
<body style="font-family: Arial;border: 0 none;">
<h3>
<center> DEVL transport Dashboard </center>
</h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<fieldset>
<legend>
<bold>Controls:</bold>
</legend>
<Form id="action_option" action="">
<input type="button" value="Details"
onClick="window.open(location.href)" target="_blank" />
<input type="button" value="Reset" style="margin:
1em 1em 1em 2em" id="resetButton">
</Form>
</fieldset>
</td>
<td>
<table>
<tr>
<th>Selected rows: </th>
<td>
<h3 id="totRowCnt"></h3>
</td>
<th>
<td></td>
</th>
<th>Retry's: </th>
<td>
<h3 id="totRetry"></h3>
</td>
</tr>
</table>
</td>
</table>
<div id="dashboard">
<table style='width:99%'>
<tr style='vertical-align: top'>
<td id="picker1"></td>
<td id="picker2"></td>
<td id="picker3"></td>
<td id="picker4"></td>
</tr>
<tr style='vertical-align: top'>
<td colspan='5' style='width: 75%'>
<div style="width: 99%; height: 600px"
id="chart1"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
On Tuesday, November 8, 2022 at 3:54:38 PM UTC-5 Michael Rooney wrote:
> 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
>
--
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 google-visualization-api+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/0d980175-21ee-4a25-a170-23d0a277e55bn%40googlegroups.com.
