As mentioned in the previous article, a report defines which data to show in Flexmonster and how to visualize it.
This guide describes:
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:
If Flexmonster is not yet embedded, set up an empty component in your webpage:
Complete the Quick start guide. Your code should look similar to the following example:
let pivot = new Flexmonster({
container: "pivotContainer",
toolbar: true
});
Complete the Integration with Angular guide. Your code should look similar to the following example:
<fm-pivot
[toolbar]="true">
</fm-pivot>
Complete the Integration with React guide. Your code should look similar to the following example:
<FlexmonsterReact.Pivot
toolbar={true}
/>
Complete the Integration with Vue guide. Your code should look similar to the following example:
<Pivot
ref="pivot"
toolbar>
</Pivot>
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.
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:
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.
.js
file and specify the UTF-8 encoding when referencing it:<script src="yourfile.js" charset="UTF-8"></script>
Check out the full list of our report guides and see what else you can configure in the component.