Getting started with the report

As mentioned in the previous article, a report defines which data to show in Flexmonster and how to visualize it.

How to create the simplest report

The ReportObject describes the structure of every report. The simplest report consists of the DataSourceObject. Follow the steps below to create a report with your data:

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:

let pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "node_modules/flexmonster/",
  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 a report with a link to a JSON data source:

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

Live example

For more ready-to-use live samples, visit our Examples page.

How to display non-Latin characters correctly

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

Next steps

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