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

See also