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

See the full code on JSFiddle.

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

How to display non-English characters correctly

If your data uses an alphabet with special characters, you need to set the UTF-8 encoding for your HTML page. There are two ways to do this:

Specify the UTF-8 encoding in the Content-Type HTTP header or the corresponding meta tag:
```
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
```
Database content or static report files must also be encoded as UTF-8.
Embed Flexmonster in a separate .js file and specify the UTF-8 encoding when referencing it:
```
<script src="yourfile.js" charset="UTF-8"></script>
```

Next steps

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