The JSON data source is very popular because such format is easily understandable for users. 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
	}
]

If JSON data is already on the page (for example, in yourJSONData variable), specify it in the report:

<html>
<head></head>
<body>
<div id="wdr-component"></div>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script>
var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	report: {
		dataSource: {
			data: yourJSONData
		}
	}
});
</script>
</body>
</html>

For getting the data from the file, specify the URL to this file:

<html>
<head></head>
<body>
<div id="wdr-component"></div>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script>
var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	report: {
		dataSource: {
			filename: "URL-to-your-JSON-file"
		}
	}
});
</script>
</body>
</html>

Learn more