wrong avg

[hfParticipant]

Hi,

When my grid is loaded with todays data there is a wrong avg displayed in the status bar:

The total is divided by 15 instead of 10..

When yesterdays data is loaded the correct avg is displayed.:

The sum is displayed well by both conditions (todays and yesterdays data).

[HristoParticipant]

Hello hf,

I try to recreate this scenario but it looks work fine.
Could you provide an example? (in ‘jseditor’ https://www.jseditor.io/ or some other way for better analyze.)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[hfParticipant]

Data is loaded from webservice when change event of jqxdatetimeinput is fired and with interval.

        $("#dateInput").on('change', function (event) {
            var selection = $("#dateInput").jqxDateTimeInput('getRange');
            if (selection.from != null) {
                Refresh()
            }
        });

        function Refresh() {
            // (re)load data
            $('#jqxLoader').jqxLoader('open');
            AdapterData = GetData();
            grid.jqxGrid({ source: AdapterData });

            // config refresh interval
            var interval = 300
            setTimeout(Refresh, interval * 1000);

        }

        function GetData() {
            var formatedData = '';
            var totalrecords = 0;

            source = {
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                datatype: 'json',
                datafields: [
                    { name: 'Id', type: 'string' },
                    { name: 'Datetime', type: 'date' },
                    { name: 'Validity', type: 'string' },
                    { name: 'TimeToPrevRow', type: 'float' },
                    { name: 'BgProductie', type: 'float' }
                ],
                url: 'getData.asmx/GetData',
                sort: function () {
                    $("#grid").jqxGrid('updatebounddata', 'sort');
                },
                filter: function () {
                    $("#grid").jqxGrid('updatebounddata', 'filter');
                    rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
                },
                beforeprocessing: function (data) {
                    var returnData = {};
                    data = data.d;
                    totalrecords = data.count;
                    returnData.totalrecords = data.count;
                    returnData.records = data.data;
                    return returnData;
                },
                formatdata: function (data) {
                    var selection = $("#dateInput").jqxDateTimeInput('getRange');

                    firstdate = new Date(selection.from);
                    lastdate = new Date(selection.to);

                    ScheduleFrom = new $.jqx.date(firstdate).toString();
                    ScheduleTo = new $.jqx.date(lastdate).toString();

                    data.filterscount = "3"
                    data.groupscount = "0"
                    data.pagenum = "1"
                    data.pagesize = "1000"
                    data.sortdatafield = "Datetime"
                    data.sortorder = "desc"

                    data.filtervalue0 = "0"
                    data.filtercondition0 = "EQUAL"
                    data.filteroperator0 = "1"
                    data.filterdatafield0 = "Historisch"

                    data.filtervalue1 = ScheduleFrom,
                    data.filtercondition1 = "GREATER_THAN_OR_EQUAL"
                    data.filteroperator1 = "1"
                    data.filterdatafield1 = "Datetime"

                    data.filtervalue2 = ScheduleTo
                    data.filtercondition2 = "LESS_THAN_OR_EQUAL"
                    data.filteroperator2 = "0"
                    data.filterdatafield2 = "Datetime"

                    formatedData = buildQueryString(data);
                    return formatedData;
                },
                deleterow: function (rowid, commit) {
                },
                updaterow: function (rowid, newdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                    debugger;
                    $.ajax({
                        type: 'GET',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        url: 'getData.asmx/UpdateData',
                        cache: false,
                        data: { Id: newdata.Id, Historisch: newdata.Historisch, Notes: newdata.Notes },
                        success: function (data, status, xhr) {
                            commit(true);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            commit(false);
                        }
                    });
                }
            };

            adapter = new $.jqx.dataAdapter(source, {
                contentType: 'application/json; charset=utf-8',
                loadError: function (xhr, status, error) {
                    $('#jqxLoader').jqxLoader('close');
                    alert(error);
                },
                downloadComplete: function (data, textStatus, jqXHR) {
                    $('#jqxLoader').jqxLoader('close');
                    return data;
                }
            });

            return adapter;
        }

Other strange behavior is when I set aggregates to avg and sum (aggregates: [‘avg’, ‘sum’]) only the (wrong) avg appears.

        function BuildGrid() {
            AdapterData = GetData();
            grid = $("#grid");

            var initrowdetails = function (index, parentElement, gridElement, datarecord) {
                var tabsdiv = null;
                var meterstanden = null;
                var notes = null;
                tabsdiv = $($(parentElement).children()[0]);
                if (tabsdiv != null) {
                    meterstanden = tabsdiv.find('.meterstanden');
                    var title = tabsdiv.find('.title');
                    title.html('<i class="fa fa-tachometer" aria-hidden="true"></i> Meterstanden'); //'
                    var container = $('<div style="margin: 5px;"></div>')
                    container.appendTo($(meterstanden));
                    var leftcolumn = $('<div style="float: left; width: 45%;"></div>');
                    var rightcolumn = $('<div style="float: left; width: 40%;"></div>');
                    container.append(leftcolumn);
                    container.append(rightcolumn);

                    $(leftcolumn).append(
                        '<dl class="dl-horizontal">' +
                           
                        '</dl>');
                    
                    $(tabsdiv).jqxTabs({ theme: theme, width: 750, height: 180 });
                }
            }

            grid.jqxGrid({
                width: '100%',
                theme: theme,
                localization: localizationobj,
                editable: true,
                columnsresize: true,
                columnsreorder: true,
                autoheight: true,
                rowsheight: 30,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div style='margin: 10px;'><ul style='margin-left: 30px;'><li class='title'></li></ul><div class='meterstanden'></div></div>", rowdetailsheight: 200 },
                initrowdetails: initrowdetails,
                autoshowloadelement: true,
                virtualmode: true,
                rendergridrows: function (args) {
                    return args.data;
                },
                filterable: true,
                showfilterrow: false,
                sortable: true,
                altrows: true,
                enabletooltips: false,
                selectionmode: 'multiplerowsextended',
                showaggregates: true,
                showstatusbar: true,
                statusbarheight: 30,
                showtoolbar: false,
                toolbarheight: 50,
                autoshowfiltericon: false,
                showfiltercolumnbackground: false,
                showfiltermenuitems: false,
                columns: [
                    { text: 'Id', datafield: 'Id', editable: false, width: 80, hidden: true },
                    { text: 'S', datafield: 'Validity', pinned: true, filtertype: 'bool', sortable: false, filterable: false, cellsalign: 'center', cellsrenderer: CellsRenderer, editable: false, width: 25, minwidth: 25, hidden: false },
                    { text: '', datafield: 'TimeToPrevRow', filtertype: 'number', cellsformat: 'f0', cellsalign: 'right', editable: false, width: 50, minwidth: 50, hidden: true },
                    {
                        text: 'Datum en tijd', pinned: true, datafield: 'Datetime', filterable: false, filtertype: 'date', sortable: false, filterable: false, cellsformat: 'ddd d MMMM yyyy HH:mm:ss', editable: false, menu: false, width: 200, minwidth: 200, aggregatesrenderer: function (aggregates, column, element) {
                            var total = BuildGridStatusbar('DatetimeAggregate');
                            return RenderAggregateStyle('DatetimeAggregates', total);
                        }
                    },
                    {
                        text: 'Productie', datafield: 'BgProductie', sortable: false, filterable: false, cellsformat: 'f1', cellsalign: 'right', editable: false, width: 75, minwidth: 75, aggregates: ['avg']
                    }
                ],
                
            });

            grid.on('rowselect', function (event) {
                var args = event.args;
                // row's bound index.
                boundIndex = args.rowindex;
                // row's visible index.
                var visibleIndex = args.visibleindex;
                // right click.
                var rightclick = args.rightclick;
                // original event.
                var ev = args.originalEvent;

                OptionsDependingOnRowSelection();
                BuildGridStatusbar();
            });

            grid.on('rowunselect', function (event) {
                var args = event.args;
                // row's bound index.
                boundIndex = args.rowindex;
                // row's visible index.
                var visibleIndex = args.visibleindex;
                // right click.
                var rightclick = args.rightclick;
                // original event.
                var ev = args.originalEvent;

                OptionsDependingOnRowSelection();
                BuildGridStatusbar();
            });

            grid.on("bindingcomplete", function (event) {
                if (ChartsFirstTimeRun == false) {
                    LoadChart();
                    ChartsFirstTimeRun = true;
                }

                BuildCharts();
            });

        }

[HristoParticipant]

Hello hf,

About the aggregates, the default options (avg) looks work fine.
Please, take a look at this example:
https://www.jseditor.io/?key=grid-aggregates
Also, I would like to ask you clarify is there some other issue (except “avg” aggregate)?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts