After formatting your JSON data and setting data types for fields, you can start connecting to the data.
In this guide, you can learn how to:
Step 1. Go to the Connect tab () on the Toolbar.
Step 2. Choose to which JSON you want to connect:
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:
let pivot = new WebDataRocks({ container: "#wdr-component", 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, specify the file’s URL in the dataSource.filename property:
let pivot = new WebDataRocks({ container: "#wdr-component", toolbar: true, report: { dataSource: { filename: "URL-to-your-JSON-file" } } });
To set a JSON data source for all reports, specify it in the Global Object:
const pivot = new WebDataRocks({ container: "#wdr-component", // Other parameters global: { dataSource: { type: "json", filename: "URL-to-your-JSON-file" }, }, report: { // Your report } });
See an example on CodePen.