The JSON data source is very popular because such format is easily understandable for users.
Supported JSON format
WebDataRocks supports a certain kind of JSON data – an array of objects, where each object is an unordered collection of key-value pairs. Here is a sample of valid JSON data for WebDataRocks:
[ { "Product": "Apple", "Price": 2.50 }, { "Product": "Cherry", "Price": 5.25 } ]
Connect to JSON via UI
Step 1. Go to the Connect tab () on the Toolbar.
Step 2. Choose to which JSON you want to connect:
- To local JSON. Use this option to load a file from your local file system.
- To remote JSON. Use this option to load a file by its URL.
Connect to JSON programmatically
There are two ways to connect to JSON programmatically:
1) If JSON data is already on the page (for example, 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" } } });