PivotGrid, jquery pivotgrid, javascript pivotgrid, jqwidgets pivotgrid, #pivotgrid, pivotgrid

PivotGrid with text cells

by txhi

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
</div>

JavaScript

// prepare sample data
let data = new Array();

let countries =
    [
      "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
    ];

let dataPoints =
    [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];

for (let i = 0; i < countries.length * 2; i++) {
  let row = {};
  let value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);

  row["country"] = countries[i % countries.length];
  row["value"] = value;

  data[i] = row;
}

let countryData = [
  { country: 'France', date: '"2016-09-25 00:00:00","2016-09-26 00:00:00","2016-09-27 00:00:00"', cityname: 'Paris', ID: 1000 },
  { country: 'South KOREA', date: '"2016-09-25 00:00:00"', cityname: 'Seoul', ID: 1001 },
  { country: 'Italy', date: '"2016-09-25 00:00:00"', cityname: 'Rome', ID: 1010 },
  { country: 'Spain', date: '"2016-09-25 00:00:00"', cityname: 'Barcelona', ID: 1100 }
];



// create a data source and data adapter
let source =
    {
      localdata: countryData,
      datatype: "array",
      datafields:
      [
        { name: 'country', type: 'string' },
        { name: 'date', type: 'string' },
        { name: 'cityname', type: 'string' },
        { name: 'value', type: 'number', map: 'ID' }
      ]
    };

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

let getDateByID = function (id)
{
  for (let i = 0; i < countryData.length; i++) {
    if (countryData[i].ID == id) {
      return countryData[i].date;
    }
  }
};
let getCityByID = function (id)
{
  for (let i = 0; i < countryData.length; i++) {
    if (countryData[i].ID == id) {
      return countryData[i].cityname;
    }
  }
};

// create a pivot data source from the dataAdapter
let pivotDataSource = new $.jqx.pivot(
  dataAdapter,
  {
    pivotValuesOnRows: false,
    rows: [{ dataField: 'country', width: 190 }],
   ...