jQWidgets Forums

jQuery UI Widgets › Forums › Grid › pivotgrid – column names

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 7 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    pivotgrid – column names Posts
  • February 8, 2018 at 4:31 am pivotgrid – column names #98621

    _ar_
    Member

    Hi,
    I have the following simple program. Please see the link https://s9.postimg.org/ua2997wgf/pivotquestion.png
    Why is the ‘value’ heading showing in the columns. I am expecting only ‘male’ & ‘female’ as the columns.

    import { Component } from '@angular/core';
import { jqxPivotGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxpivotgrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor()
  {
      this.pivotDataSource = this.createPivotDataSource();
  }

  pivotDataSource: null;

  createPivotDataSource(): any {
      // Prepare Sample Data
      let data = new Array();

      const countries =
      [
          'Germany', 'France', 'United States'
      ];

      const gender =
      [
          'male', 'female'
      ];
      
      let k = 0;
      for (let i = 0; i < countries.length; i++) {
        for (let j = 0; j < gender.length; j++) {
            let row = {};
          row['country'] = countries[i];
          row['gender'] = gender[j];
          row['value'] = (i + 1) * (j + 1);
          data[k++] = row;
        }
      }

      // Create a Data Source and Data Adapter
      const source =
      {
          localdata: data,
          datatype: 'array',
          datafields:
          [
            { name: 'country', type: 'string' },
            { name: 'gender', type: 'string' },
            { name: 'value', type: 'number' }
          ]
      };

      const dataAdapter = new jqx.dataAdapter(source);
      dataAdapter.dataBind();

      // Create a Pivot Data Source from the DataAdapter
      const pivotDataSource = new jqx.pivot(
          dataAdapter,
          {
              pivotValuesOnRows: false,
              rows: [{ dataField: 'country', width: 190 }],
              columns: [{ dataField: 'gender', width: 190 }],
              values: 
              [
                  { dataField: 'value', width: 200, 'function': 'sum'} 
              ]
          }
      );

      return pivotDataSource;
  }
}
    February 8, 2018 at 12:28 pm pivotgrid – column names #98629

    Hristo
    Participant

    Hello rajesh.gupta,

    The PivotGrid has represented these three components – rows, columns and values.
    You could find more details in the API Documentation.
    I would like to suggest try this example:
    https://www.jqwidgets.com/angular/angular-pivotgrid/angular-pivotgrid-cell-values-alignment.htm
    If you have a simple structure of rows and columns you could use jqxGrid.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    February 9, 2018 at 2:16 am pivotgrid – column names #98636

    _ar_
    Member

    Input and expected output is shown in the link https://s14.postimg.org/sgbaglyj5/jqpivot.png
    My issue is – How to remove the extra ‘value’ row that is appearing, as shown in the link https://postimg.org/image/o94kc59u3/

    February 12, 2018 at 1:54 pm pivotgrid – column names #98677

    Hristo
    Participant

    Hello rajesh.gupta,

    Please, take a look at this example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>JavaScript PivotGrid - cell values alignment and number settings</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.light.css" type="text/css" />
   <script type="text/javascript" src="../../scripts/jquery-1.12.4.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/jqxpivot.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxpivotgrid.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>  
    <script type="text/javascript">
        $(document).ready(function () {
            var data2 = [
                { country: 'Germany', valMale: 2, valFemale: 2 },
                { country: 'France', valMale: 5, valFemale: 5 },
                { country: 'USA', valMale: 10, valFemale: 9 },
            ]

            // create a data source and data adapter
            var source =
            {
                localdata: data2,
                datatype: "array",
                datafields:
                [
                    { name: 'country', type: 'string' },
                    { name: 'valMale', type: 'number' },
                    { name: 'valFemale', type: 'number' }
                ]
            };

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

            // create a pivot data source from the dataAdapter
            var pivotDataSource = new $.jqx.pivot(
                dataAdapter,
                {
                    pivotValuesOnRows: false,
                    rows: [{ dataField: 'country', width: 190 }],
                    columns: [],
                    values: [
                        { dataField: 'valMale', width: 200, 'function': 'sum', text: 'Male', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                        { dataField: 'valFemale', width: 200, 'function': 'sum', text: 'Female', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } }
                    ]
                });

            // create a pivot grid
            $('#divPivotGrid').jqxPivotGrid(
            {
                source: pivotDataSource,
                treeStyleRows: true,
                autoResize: false,
                multipleSelectionEnabled: true
            });
        });
    </script>
</head>
<body class='default'>
    <div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
    </div>
</body>
</html>

    If you want to reorganize the data before you set in the PivotGrid you could use beforeLoadComplete callback of the DataAdapter.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.