Connecting to JSON data

Complete the Integrating Flexmonster guide. Your code should look similar to the following example:

const pivot = new Flexmonster({
  container: "pivotContainer",
  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
/>

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

Live example

Connecting to data stored in a nested JSON property

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
}

Live example

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.

• To load the data and clear the report, use the connectTo() API call:

  pivot.connectTo({
    filename: "<url-to-remote-json-data>"
  });

  Live example

• To load the data without clearing the report, use the updateData() API call:

  pivot.updateData({
    filename: "<url-to-remote-json-data>"
  });

  Live example

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. 

Live example

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.

• To load the file and clear the report, use the connectTo() API call:

  pivot.connectTo({
    type: "json",
    browseForFile: true
  });

  Note The type property must be defined explicitly.

  Live example

• To load the file without clearing the report, use the updateData() API call:

  pivot.updateData({
    type: "json",
    browseForFile: true
  });

  Note The type property must be defined explicitly.

  Live example

To connect to inline JSON data in the report, use the dataSource.data property:

const pivot = new Flexmonster({
  container: "pivotContainer",
  report: {
    dataSource: {
      data: getData()
    }
  }
});

function getData() {
  return [{
    "Category": "Accessories",
    "Color": "green",
    "Quantity": 22
  }];
}

Live example

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.

• To load the data and clear the report, use the connectTo() API call:

  pivot.connectTo({
    data: getData()
  });
  
  function getData() {
    return [{
      "Country": "Canada",
      "Product": "Bike",
      "Price": 68450
    }];
  }

  Live example

• To load the data without clearing the report, use the updateData() API call:

  pivot.updateData({
    data: getData()
  });
  
  function getData() {
    return [{
      "Country": "Canada",
      "Product": "Bike",
      "Price": 68450
    }];
  }

  Live example