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"
}
}
});