Documentation menu
Connecting to JSON
After formatting your JSON data and setting data types for fields, you can start connecting to the data.
Connect to JSON via UI
Step 1. Go to the Connect tab () on the Toolbar.
Step 2. Choose the JSON you want to connect to:
- Local JSON. Use this option to load a file from your local file system.
- Remote JSON. Use this option to load a remote JSON file by its URL or data returned by a server-side script.
Connect to JSON programmatically
There are two ways to connect to JSON programmatically:
1) If JSON data is already defined on the page (e.g., in the jsonData
variable), specify it in the dataSource.data property:
const pivot = new WebDataRocks({
container: "#pivotContainer",
toolbar: true,
report: {
dataSource: {
data: jsonData
}
}
});
const jsonData = [
{
"Product": "Apple",
"Price": 2.50
},
{
"Product": "Cherry",
"Price": 5.25
}
];
2) If your JSON data is in a file or is returned by a server-side script, specify the URL in the dataSource.filename property:
const pivot = new WebDataRocks({
container: "#pivotContainer",
toolbar: true,
report: {
dataSource: {
filename: "URL-to-your-JSON-file"
}
}
});
Set a JSON data source for all reports
To set a JSON data source for all reports, specify it in the Global Object:
const pivot = new WebDataRocks({
container: "#pivotContainer",
// Other parameters
global: {
dataSource: {
type: "json",
filename: "URL-to-your-JSON-file"
},
},
report: {
// Your report
}
});
See an example on CodePen.
import { Component } from "@angular/core";
import { WebdatarocksPivotModule } from "@webdatarocks/ngx-webdatarocks"
@Component({
selector: "app-root",
standalone: true,
imports: [WebdatarocksPivotModule],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
globalReportJson = {
dataSource: {
type: "json",
filename: "URL-to-your-JSON-file"
}
};
reportJson = {
// Your report
};
}
<app-wbr-pivot
[toolbar]="true"
[global]="globalReportJson"
[report]="reportJson">
</app-wbr-pivot>