Connecting to JSON

After formatting your JSON data and setting data types for fields, you can start connecting to the data.

In this guide, you can learn how to:

• Connect to JSON via UI
• Connect to JSON programmatically
• Set a JSON data source for all reports

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 defined on the page (e.g., 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"
    }
  }
});

Set a JSON data source for all reports

To set a JSON data source for all reports, specify it in the Global Object:

const pivot = new WebDataRocks({
  container: "#wdr-component",
  // Other parameters
  global: {
    dataSource: {
      type: "json",
      filename: "URL-to-your-JSON-file"
    },
  },
  report: {
    // Your report
  }
});

See an example on CodePen.

See also

• Supported JSON formats
• Setting data types in JSON
• Creating multilevel hierarchies
• Mapping object for JSON