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

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

   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.