Connecting to JSON
After formatting your JSON data and setting data types for fields, you can start connecting to the data.
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) To connect to inline JSON data in the report, use the dataSource.data property:
<script setup>
import {Pivot} from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";
const reportJson = {
dataSource: {
data: [
{
"Product": "Apple",
"Price": 2.50
},
{
"Product": "Cherry",
"Price": 5.25
}
]
}
};
</script>
<template>
<div>
<Pivot
v-bind:report="reportJson"
toolbar
/>
</div>
</template>
2) If your JSON data is in a file, specify the file’s URL in the dataSource.filename property:
<script setup>
import {Pivot} from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";
const reportJson = {
dataSource: {
filename: "URL-to-your-JSON-file"
}
};
</script>
<template>
<div>
<Pivot
v-bind:report="reportJson"
toolbar
/>
</div>
</template>
Set a JSON data source for all reports
To set a JSON data source for all reports, specify it in the Global Object:
<script setup>
import {Pivot} from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";
const globalReportJson = {
dataSource: {
type: "json",
filename: "URL-to-your-JSON-file"
}
};
const reportJson = {
// Your report
};
</script>
<template>
<div>
<Pivot
v-bind:global="globalReportJson"
v-bind:report="reportJson"
toolbar
/>
</div>
</template>