PivotGrid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: pivotGrid from JSON data not loading

This topic contains 2 replies, has 2 voices, and was last updated by admin 3 weeks, 5 days ago.

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

Author

PivotGrid Posts

August 18, 2026 at 9:58 am PivotGrid #136779

Participant

Hello, I have a problem creating a pivotGrip from JSON data coming from my server. Same pivotGrid is working with local array data even if the data i send from the server are similar – what do I overlook? I added the code for both variants and the data of the first record from both dataadapters below.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=11; IE=edge">
<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css"    type="text/css">
<script src="/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqx-all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  function initPivotGrid() {
    var data = new Array();
    var cperiode =
    [
       "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
    ];
    var familie =
    [
       "O&G", "SLH", "SLW", "PCP"
    ];
    var linie =
    [
       "TSP", "CFP", "VAL"
    ];
    for (var i = 0; i < 100; i++) {
       var row = {};
       row["cperiode"] = cperiode[i];
       row["produktfamilie"] = familie[i < familie.length ? i : Math.floor(Math.random() * familie.length)];
       row["produktlinie"] = linie[i < linie.length ? i : Math.floor(Math.random() * linie.length)];      
       row["menge"] = Math.round(Math.random() * 30);
       row["mengeverspaetet"] = Math.round(Math.random() * 10);
       data.push(row);
    }              
    var arraySource =
    {
       localdata: data,
       datatype: "array",
       datafields:
       [
          { name: 'cperiode', type: 'string' },
          { name: 'produktlinie', type: 'string' },
          { name: 'produktfamilie', type: 'string' },
          { name: 'menge', type: 'number' },
          { name: 'mengeverspaetet', type: 'number' }
       ]
    };
    var dataArrayAdapterPivot = new $.jqx.dataAdapter(arraySource, {
        beforeLoadComplete: function (records) {
            console.log(records[0]);
            }
        });
    dataArrayAdapterPivot.dataBind();
    var pivotArrayDataSource = new $.jqx.pivot(
       dataArrayAdapterPivot,
       {
         pivotValuesOnRows: true,
         rows: [{ dataField: 'produktlinie' }, { dataField: 'produktfamilie'}],
         columns: [{ dataField: 'cperiode'}],
         values: [
           { dataField: 'menge', 'function': 'sum', text: 'QTY shipped'},
           { dataField: 'mengeverspaetet', 'function': 'sum', text: 'QTY delayed' }
         ]
       }
    );
    $('#arrayPivot').jqxPivotGrid(
       {
          source: pivotArrayDataSource,
          treeStyleRows: false,
          multipleSelectionEnabled: true
       }
    );
    var sourcePivot =
      {
          datatype: "json",
          datafields: [
                  { name: 'cperiode', type: 'string' },
                  { name: 'produktlinie', type: 'string' },
                  { name: 'produktfamilie', type: 'string' },
                  { name: 'menge', type: 'number' },
                  { name: 'mengeverspaetet', type: 'number' }
                  ],
          url: "/portal/get-data.p",
          data: {
                jahr: '2026',
                bereich: '',
                typ: 'LIEFERTREUE'
              }
     };
    var dataAdapterPivot = new $.jqx.dataAdapter(sourcePivot, {
        beforeLoadComplete: function (records) {
            console.log(records[0]);
            }
        });
    dataAdapterPivot.dataBind();
    var pivotDataSource = new $.jqx.pivot(
       dataAdapterPivot,
       {
         pivotValuesOnRows: true,
         rows: [{ dataField: 'produktlinie' }, { dataField: 'produktfamilie'}],
         columns: [{ dataField: 'cperiode'}],
         values: [
           { dataField: 'menge', 'function': 'sum', text: 'QTY shipped'},
           { dataField: 'mengeverspaetet', 'function': 'sum', text: 'QTY delayed' }
         ]
       }
    );

    $('#jsonPivot').jqxPivotGrid(
       {
          source: pivotDataSource,
          treeStyleRows: false,
          multipleSelectionEnabled: true
       }
    );
};
initPivotGrid();
});
</script>

</head>
<body>
<form name="testform" action="/test.r" method="POST">
    <table border=0 cellspacing=0 cellpadding=0>
    <tr>
    <td colspan="8" bgcolor="#FFFFFF">
         <div id='arrayPivot' class='no-border' style='border: none; width:1000px; height: 420px'>
         </div>
    </td>
    </tr><tr>
    <td colspan="8" bgcolor="#FFFFFF">
         <div id='jsonPivot' class='no-border' style='border: none; width:1000px; height: 420px'>
         </div>
    </td>
    </tr>
	</table>
</form>
</body>
</html>

<!--
arraySource beforeLoadComplete
test.r?dialogSprache=:103 Objectcperiode: "1"menge: 27mengeverspaetet: 7produktfamilie: "O&G"produktlinie: "TSP"uid: 0[[Prototype]]: Object

jsonSource beforeLoadComplete
test.r?dialogSprache=:151 Objectcperiode: "1"menge: 1mengeverspaetet: 1produktfamilie: "TSP"produktlinie: "TSP"uid: 0[[Prototype]]: Object
-->

August 18, 2026 at 11:40 am PivotGrid #136780

Michael Gross

Participant

Think I found it – it was a solution from Peter 5 years ago: the privot is created before the datasource was loaded – added async: false brought the solution.

August 19, 2026 at 9:16 pm PivotGrid #136781

admin

Keymaster

Hi Michael,

Thanks for the update. If you need help about another issue, do not hesitate to contact us.

Best regards,
Peter Stoev

Author

Posts

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

You must be logged in to reply to this topic.