Getting started with the report

All Flexmonster’s configurations, such as data source, filters, and formatting, are stored in a report. You can create multiple reports with different configurations. Every report is described by the ReportObject.

Flexmonster also supports saving and restoring the report.

To see ready-to-use examples of configuring the report, visit our Examples page.

How to create the simplest report

The simplest report consists of the DataSourceObject. Complete the following steps to create a report:

Step 1. Embed Flexmonster into your project.

If Flexmonster is not yet embedded, set up an empty component in your webpage:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true
});

<FlexmonsterReact.Pivot
 toolbar={true}
/>

<fm-pivot
 [toolbar]="true">
</fm-pivot>

<Pivot
 toolbar
/>

Step 2. Specify the report.dataSource property:

const pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    }
  }
});

function getData() {
  return [
    {
      "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
    },
    // Other data
  ]
}

In this example, we connected to inline JSON data. To connect to your data source, check out the Supported data sources guide.

Step 3. Open the webpage where Flexmonster is embedded to see the created report Live example.

How to display non-Latin characters in the report correctly

If you are using data or localization with non-Latin characters, ensure you have set UTF-8 encoding for your data and page. This is required to display the data correctly in the component.

Next steps

Check out the full list of our report guides to see what else you can configure in the component.