This guide illustrates how to connect Flexmonster to a JSON data source.
You can connect to your JSON data using the client-side or the server-side approach. To connect to a JSON file smaller than 100 MB, use the client-side approach, which is described in this guide.
To connect to a JSON file larger than 100 MB, we recommend using Flexmonster Data Server — our server-side solution for processing large datasets. For more details, refer to the Connecting to JSON using Flexmonster Data Server guide.
Your JSON data should be specified in one of the following formats:
[ { "Color" : "green", "Country" : "Canada", "State" : "Ontario", "City" : "Toronto", "Price" : 174, "Quantity" : 22 }, { "Color" : "red", "Country" : "USA", "State" : "California", "City" : "Los Angeles", "Price" : 166, "Quantity" : 19 } ]
Check out an example on JSFiddle.
[ ["Color", "Country", "State", "City", "Price", "Quantity"], ["green", "Canada", "Ontario", "Toronto", 174, 22], ["red”, "USA", "California", "Los Angeles", 166, 19] ]
See an example on JSFiddle.
Other JSON formats aren’t officially supported and may have unexpected results.
Note Ensure that dates are also specified in a supported format.
If Flexmonster is not yet embedded, set up an empty component in your webpage:
Complete the Integrating Flexmonster guide. Your code should look similar to the following example:
let pivot = new Flexmonster({ container: "pivotContainer", componentFolder: "node_modules/flexmonster/", toolbar: true });
Complete the Integration with React guide. Your code should look similar to the following example:
<FlexmonsterReact.Pivot toolbar={true} />
Complete the Integration with Angular guide. Your code should look similar to the following example:
<fm-pivot [toolbar]="true"> </fm-pivot>
Complete the Integration with Vue guide. Your code should look similar to the following example:
<Pivot toolbar />
You can connect Flexmonster to remote, local, or inline JSON data.
Remote JSON data can be a remote JSON file or data generated by a server-side script. Flexmonster can be connected to remote JSON data in one of the following ways:
To connect to remote JSON data via UI, use the Toolbar:
Step 1. On the Toolbar, select Connect > To remote JSON. As a result, the Open remote JSON pop-up window will appear.
Step 2. Enter the URL to your JSON data in the input field and click Open.
To connect to remote JSON data in the report, use the dataSource.filename property:
report: { dataSource: { filename: "<url-to-remote-json-data>" } }
See a live demo on JSFiddle.
If your data for Flexmonster is stored in a nested JSON property, define the path to that property in the dataSource.dataRootPath.
For example, look at the structure of the following JSON file:
{ "creationDate": "01-01-2022", "userData": { "flexmonsterData": [ // Your data ] } }
As you can see, the needed data is stored in the userData.flexmonsterData
property. To connect Flexmonster to this data, set the dataRootPath
property to "userData.flexmonsterData"
:
report: { dataSource: { filename: "<url-to-remote-json-data>", dataRootPath: "userData.flexmonsterData" }, // Other configs }
See an example on JSFiddle.
To connect to remote JSON data at runtime, use the connectTo() or updateData() API call with the DataSourceObject input parameter. For details on data source configurations, go to the In the report tab.
connectTo()
API call:flexmonster.connectTo({ filename: "<url-to-remote-json-data>" });
Try this example on JSFiddle.
updateData()
API call:flexmonster.updateData({ filename: "<url-to-remote-json-data>" });
Check out an example on JSFiddle.
The pivot table can be connected to a JSON file from your computer in one of the following ways:
To connect to a local JSON file via UI, use the Toolbar:
Step 1. On the Toolbar, select Connect > To local JSON. As a result, the file manager will appear.
Step 2. Select the file via the file manager.
To connect to a local JSON file in the report, use the dataSource.browseForFile property:
report: { dataSource: { type: "json", browseForFile: true } }
Note The type
property must be defined explicitly.
See a live demo on JSFiddle.
To connect to a local JSON file at runtime, use the connectTo() or updateData() API call with the DataSourceObject input parameter. For details on data source configurations, go to the In the report tab.
connectTo()
API call: flexmonster.connectTo({ type: "json", browseForFile: true });
Note The type
property must be defined explicitly.
Try this example on JSFiddle.
updateData()
API call: flexmonster.updateData({ type: "json", browseForFile: true });
Note The type
property must be defined explicitly.
See an example on JSFiddle.
The pivot table can be connected to inline JSON data in one of the following ways:
To connect to inline JSON data in the report, use the dataSource.data property:
let pivot = new Flexmonster({ container: "pivot-container", componentFolder: "https://cdn.flexmonster.com/", report: { dataSource: { data: getData() } } }); function getData() { return [{ "Category": "Accessories", "Color": "green", "Quantity": 22 }]; }
See a live demo on JSFiddle.
To connect to inline JSON data at runtime, use the connectTo() or updateData() API call with the DataSourceObject input parameter. For details on data source configurations, go to the In the report tab.
connectTo()
API call: flexmonster.connectTo({ data: getData() }); function getData() { return [{ "Country": "Canada", "Product": "Bike", "Price": 68450 }]; }
Try this example on JSFiddle.
updateData()
API call: flexmonster.updateData({ data: getData() }); function getData() { return [{ "Country": "Canada", "Product": "Bike", "Price": 68450 }]; }
Check out an example on JSFiddle.
If you use an alphabet with special characters you must use UTF-8 encoding. There are two ways to do this:
content-type
HTTP header or the corresponding meta
tag: <meta http-equiv="content-type" content="text/html; charset=utf-8"/>Content from a database and static JSON files also must be encoded as UTF-8.
<script src="yourfile.js" charset="UTF-8"></script>
If you run into any issues, visit our troubleshooting page.
You may be interested in the following articles: