Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    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

    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.