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. Follow the steps below 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:

In pure JavaScript

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

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

In React

Complete the Integration with React guide. Your code should look similar to the following example:

<FlexmonsterReact.Pivot
 toolbar={true}
/>

In Angular

Complete the Integration with Angular guide. Your code should look similar to the following example:

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

In Vue

Complete the Integration with Vue guide. Your code should look similar to the following example:

<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.