PostgreSQL in JavaScript Pivot Table control
This section describes how to consume data from PostgreSQL database using Microsoft Npgsql and bind it to the Pivot Table via a Web API controller.
Steps to connect the PostgreSQL database via Web API application
1. Download the ASP.NET Core Web Application from this GitHub repository.
2. The application named as PivotController (server-side) that is downloaded from the above GitHub repository includes the PivotController.cs file under Controllers folder, which is helps to do data communication with Pivot Table.
3. In the Web API controller (aka, PivotController), NpgsqlConnection helps to connect the PostgreSQL database. Next, using NpgsqlCommand and NpgsqlDataAdapter you can process the desired PostgreSQL query string and retrieve data from the database. The Fill method of the NpgsqlDataAdapter is used to populate the retrieved data into a DataTable as shown in the following code snippet.
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Data;
using Npgsql;
namespace PivotController.Controllers
{
[ApiController]
[Route("[controller]")]
public class PivotController : ControllerBase
{
public dynamic GetPostgreSQLResult()
{
// Replace with your own connection string.
NpgsqlConnection connection = new NpgsqlConnection("<Enter your valid connection string here>");
connection.Open();
NpgsqlCommand cmd = new NpgsqlCommand("SELECT * FROM tablename", connection);
NpgsqlDataAdapter da = new NpgsqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
connection.Close();
return dt;
}
}
}4. In the Get() method of the PivotController.cs file, the GetPostgreSQLResult method is used to retrieve the PostgreSQL data as a DataTable, which is then serialized into JSON using JsonConvert.SerializeObject().
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Data;
using Npgsql;
namespace PivotController.Controllers
{
[ApiController]
[Route("[controller]")]
public class PivotController : ControllerBase
{
[HttpGet(Name = "GetPostgreSQLResult")]
public object Get()
{
return JsonConvert.SerializeObject(GetPostgreSQLResult());
}
public dynamic GetPostgreSQLResult()
{
// Replace with your own connection string.
NpgsqlConnection connection = new NpgsqlConnection("<Enter your valid connection string here>");
connection.Open();
NpgsqlCommand cmd = new NpgsqlCommand("SELECT * FROM tablename", connection);
NpgsqlDataAdapter da = new NpgsqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
connection.Close();
return dt;
}
}
}5. Run the web application (aka, PivotController) and it will be hosted within the URL https://localhost:7238.
6. Finally, the retrieved data from PostgreSQL database which is in the form of JSON can be found in the Web API controller available in the URL link https://localhost:7238/Pivot, as shown in the browser page below.
Connecting the Pivot Table to the hosted Web API URL
1. Download the Typescript Pivot Table sample from this GitHub repository.
2. Next, map the hosted Web API’s URL link https://localhost:7238/Pivot to the Pivot Table component in app.ts by using the url property under dataSourceSettings.
import { PivotView, FieldList } from '@syncfusion/ej2-pivotview';
PivotView.Inject(FieldList);
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
url: 'https://localhost:7238/Pivot',
//Other codes here...
}
});
pivotObj.appendTo('#PivotView');3. Frame and set the report based on the data retrieved from the PostgreSQL database.
import { PivotView, FieldList } from '@syncfusion/ej2-pivotview';
PivotView.Inject(FieldList);
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
url: 'https://localhost:7238/Pivot',
enableSorting: true,
columns: [{ name: 'openinghours_practice' }, { name: 'closinghours_practice' }],
values: [{ name: 'revenue' }],
rows: [{ name: 'servicetype' }, { name: 'servicecategory' }]
},
showFieldList: true,
width: '100%',
height: 350,
});
pivotObj.appendTo('#PivotView');Run the sample to get the following result.
