Calculationg in aggregates - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: datagrid, grid, grid aggregates, javascript datagrid, jquery grid

This topic contains 8 replies, has 3 voices, and was last updated by Peter Stoev 6 years, 2 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Calculationg in aggregates Posts
September 22, 2015 at 1:29 pm Calculationg in aggregates #76066

Klaus H
Participant

Hi,

I was wonderding if something like this is possible.

I have a grid with several columns – three of them are connected.

The first column is a value. The second column is a percentage input. These two columns are editable. I have a third column which is not editable and shows the result of the two columns. That’s no problem to realize. But I also want to have an aggregate row with those three columns present. The value column and the result column are a normal sum, but the percentage would have to be calculated from the two other values in the aggregate. Is there any chance this is possible?

Regards
Klaus

September 22, 2015 at 1:57 pm Calculationg in aggregates #76070

Peter Stoev
Keymaster

Hi Klaus,

You may check the Grid’s demos about aggregates. We have such demo, not for percetanges, but it uses data from other columns.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

September 22, 2015 at 3:28 pm Calculationg in aggregates #76073

Klaus H
Participant

Hello Peter,

thank you for your answer and for the good news, unfortunately I don’t see that feature in any of the 3 aggregate examples. Could you please give me a pointer in the right direction? I’d appreciate that very much.

Best Regards
Klaus

September 22, 2015 at 3:34 pm Calculationg in aggregates #76074

Klaus H
Participant

I think I see it now, it’s in the aggregates property of the custom aggregates in the Price column?

That seems to take each value of the rowand adds it up to the aggregate, I need in a aggregate field calculation the value of two other aggretage sums. I’ll try to build an example and get back to you.

September 23, 2015 at 4:34 am Calculationg in aggregates #76085

Peter Stoev
Keymaster

Hi Klaus,

It is this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customaggregates.htm?arctic. The function is called for each row. If you need other customization, you can think of some other calculations and just displaying the result as custom aggregate – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/aggregatesrenderer.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

September 23, 2015 at 7:05 am Calculationg in aggregates #76090
Klaus H
Participant
Hello Peter,

I understand these examples, but they all do something different than what I want to do.

Here’s an example, I mofidied the the second example:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this sample is demonstrated how to customize the rendering of the Grid's aggregates.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
            var data = [{"id": 1, "amount": 100, "percentchange": 5, "result": 105}, {"id": 2, "amount": 200, "percentchange": 3, "result": 206}, {"id": 3, "amount": 75, "percentchange": 8, "result": 81}, {"id": 4, "amount": 90, "percentchange": 4, "result": 93.6}, {"id": 5, "amount": 200, "percentchange": -4, "result": 192}]

            var source =
            {
                localdata: data,
                datatype: "json",
				id: "id",
                datafields:
                [
                    { name: 'id', type: 'number' },
                    { name: 'amount', type: 'number' },
                    { name: 'percentchange', type: 'number' },
                    { name: 'result', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,                
                showstatusbar: true,
                statusbarheight: 50,
                showaggregates: true,
                columns: [
                  {
                      text: 'Amount', datafield: 'amount', width: 190, cellsalign: 'right', cellsformat: 'd', aggregates: ['sum']
                  },
                  {
                      text: 'Change (%)', datafield: 'percentchange', width: 190, cellsalign: 'right', cellsformat: 'd'
                  },
                  {
                      text: 'Result', datafield: 'result', width: 190, cellsalign: 'right', cellsformat: 'd', aggregates: ['sum']
                  }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>
```
If you run this example, you see I have three columns I display, an amount, a change via percent and than the amount after the change. I use aggregates to show the sum of the two amount columns which result in 665 and 677.6. Now I want to calculate the resulting percent change for the two sum values with the formula 677.6/665*100-100 resulting in 1.89473684. But is it possible to do this calculationin an aggregatesrenderer and if so, how do I get to the two values?

Best Regards
Klaus
September 25, 2015 at 6:30 am Calculationg in aggregates #76174

Klaus H
Participant

Just to share my solution for the rest:

I simply used JavaScript variables that I defined outside of the grid for this. Initialize them with zero, building the sum in aggregates custom function and then accessing the variables in the aggregates renderer, calculate the percent and then display the result. And then of course reset the variables back to zero.

Best Regards
Klaus

February 1, 2019 at 8:49 am Calculationg in aggregates #103807

marta.sachez@altai.es
Participant

Hello, I have a similar issue, ¿could you expose here the code you have used to achive this, please? I would be very helpfull for me. Thanks is advanced.

February 2, 2019 at 4:35 pm Calculationg in aggregates #103819

Peter Stoev
Keymaster

Hi Marta,

This topic is from 4 years ago and a lot of things changed in the Grid. What kind of issue do you have? Please, share jsfiddle.net sample.

Regards,
Peter
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.