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.

This guide describes:

• How to create the simplest report
• How to display non-English characters correctly

How to create the simplest report

The Report Object describes the structure of every report. The simplest report consists of the Data Source Object. Follow the steps below to create a report with your data:

1. If Flexmonster is not yet embedded, set up an empty component in your web page:

   In pure JavaScript

   Complete the Quick start guide. Your code should look similar to the following example:

   let pivot = new Flexmonster({
       container: "pivotContainer",
       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 React

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

   <FlexmonsterReact.Pivot
    toolbar={true}
   />

   In Vue

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

   <Pivot
    ref="pivot"
    toolbar>
   </Pivot>

2. Specify a report with a link to a JSON data source:

   let pivot = new Flexmonster({
       container: "pivotContainer", 
       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:

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