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

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>
    <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>
Reply all
Reply to author
Forward
0 new messages