Usage examples

This guide lists examples of Flexmonster usage in Angular. They are provided within our sample Angular project.

Creating the pivot table

The first example demonstrates how to embed Flexmonster into your project with the <fm-pivot> directive.

Notice how <fm-pivot> initialization parameters are specified in pivot-table-demo.component.html:

<fm-pivot #pivot
  [report]="'https://cdn.flexmonster.com/github/demo-report.json'"
  [toolbar]="true"
  [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}"
  [height]="600"
  (beforetoolbarcreated)="customizeToolbar($event)">
</fm-pivot>

Learn more about <fm-pivot> and its parameters: The <fm-pivot> directive.

Handling events

This usage example focuses on Flexmonster events. It provides a toggle button to subscribe to all the events and unsubscribe from them.

Under the component, there is a log output. When an event is triggered, the output shows info about that event.

Event handling is implemented in the handling-events.component.ts file. To subscribe to an event, we use the on() method:

this.pivot.flexmonster.on(eventName, () => {
  // Handle the event
});

To unsubscribe from an event, we use the off() method:

this.pivot.flexmonster.off(eventName);

See the full list of Flexmonster events in our documentation.

Learn more about using Flexmonster events in Angular.

Using API calls

The Using API calls section is about interacting with the component through API calls. Use the toggle buttons to enable the read-only mode or switch between the grid and charts.

Check out using-api-calls.component.ts to see how the API calls are used:

The showGrid() and showCharts() methods allow switching between the views:

showChart() {
  this.pivot.flexmonster.showCharts("column");
}

showGrid() {
  this.pivot.flexmonster.showGrid();
}

The setOptions() API call is used to make Flexmonster read-only:

readOnly() {
  this.pivot.flexmonster.setOptions({
    readOnly: true
  });
  this.pivot.flexmonster.refresh();
}

See the full list of Flexmonster API calls.

Learn more about using Flexmonster methods in Angular.

Updating data

The Updating data section shows how to refresh data at runtime.

Each time you click the Update data button, the dataset is updated and loaded to Flexmonster using the updateData() API call:

updateTheData() {
  this.data = [
    // Updated data
  ];
  // Updating the data in Flexmonster
  this.pivot.flexmonster.updateData({ data: this.data });
}

See the full code in the updating-data.component.ts file.

Learn more about using Flexmonster methods in Angular.

The Customizing the Toolbar section contains an example of Toolbar customization.

Flexmonster is subscribed to the beforetoolbarcreated event in customizing-toolbar.component.html:

<fm-pivot #pivot 
  [toolbar]="true" 
  ...
  (beforetoolbarcreated)="customizeToolbar($event)">
</fm-pivot>

The customizeToolbar() handler is defined in the customizing-toolbar.component.ts file:

customizeToolbar(toolbar: Flexmonster.Toolbar) {
  let tabs = toolbar.getTabs();
  toolbar.getTabs = () => {
    tabs = [];
    // Adding a new tab
    tabs.push({
      id: "fm-tab-newtab",
      title: "New Tab",
      // Specifying a custom handler
      handler: () => this.showInfo(),
      icon: toolbar.icons.open,
    });
    return tabs;
  };
}

As a result, a new tab with custom functionality is added.

Learn more about customizing the Toolbar.

Customizing the grid

The Customizing the grid example demonstrates how to highlight a certain measure on the grid using customizeCell.

Check out customizing-grid.component.html to see how customizeCell is defined:

<fm-pivot #pivot 
  [toolbar]="true"
  ...
  [customizeCell]="customizeCellFunction"
  (beforetoolbarcreated)="customizeToolbar($event)">
</fm-pivot>

The customizeCellFunction() is defined in the customizing-grid.component.ts file. This function applies custom CSS to the cells with the "Price" measure:

customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
  if (data.measure && data.measure.uniqueName == "Price") {
    cell.style = {
      // Define your CSS for the cell
    };
  }
}

Learn more about customizing the grid.

Integrating with Highcharts

See an example of Highcharts integration in the With Highcharts section.

In the with-highcharts.component.html file, we add a container for Highcharts and subscribe Flexmonster to the reportcomplete event:

<div>
  <fm-pivot #pivot
    [toolbar]="true"
    ...
    (reportcomplete)="onReportComplete()"
    (beforetoolbarcreated)="customizeToolbar($event)">
  </fm-pivot>
</div>

<div class="chart-container">
  <div id="highcharts-container"></div>
</div>

The Highcharts module and Flexmonster Connector for Highcharts are imported in the with-highcharts.component.ts file:

// Importing Highcharts
import * as Highcharts from 'highcharts';
// Importing Flexmonster Connector for Highcharts
import "flexmonster/lib/flexmonster.highcharts.js";

with-highcharts.component.ts also contains the chart-drawing function and the onReportComplete() handler:

drawChart() {
  this.pivot.flexmonster.highcharts?.getData(
    // Creating and configuring the chart
  );
}

onReportComplete() {
  this.pivot.flexmonster.off("reportcomplete");
  this.drawChart();
}

Learn more about integration with Highcharts.

Integrating with amCharts

Our sample project contains examples of integration with amCharts 5 and amCharts 4:

amCharts 5

The With amCharts section provides a dashboard with Flexmonster and amCharts 5.

In the with-amcharts.component.html file, we add a container for amCharts and subscribe Flexmonster to the reportcomplete event:

<div>
  <fm-pivot #pivot
    [toolbar]="true"
    ...
    (reportcomplete)="onReportComplete()"
    (beforetoolbarcreated)="customizeToolbar($event)">
  </fm-pivot>
</div>

<div class="chart-container">
  <div id="amcharts-container" style="width: 100%; height: 500px;"></div>
</div>

The amCharts 5 library and Flexmonster Connector for amCharts are imported in the with-amcharts.component.ts file:

// Importing amCharts
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

// Importing Flexmonster Connector for amCharts
import "flexmonster/lib/flexmonster.amcharts.js";

with-amcharts.component.ts also contains the onReportComplete() handler and chart-drawing functions:

drawChart() {
  this.pivot.flexmonster.amcharts?.getData(
    {},
    this.createChart.bind(this),
    this.updateChart.bind(this)
  );
}

onReportComplete() {
  this.pivot.flexmonster.off("reportcomplete");
  this.drawChart();
}

createChart = (chartData: Flexmonster.GetDataValueObject,
            rawData: Flexmonster.GetDataValueObject) => {
  // Creating and configuring the chart
}

updateChart(chartData: Flexmonster.GetDataValueObject,
            rawData: Flexmonster.GetDataValueObject) {
  // Updating the chart
}

amCharts 4

The example with amCharts 4 is hidden from the project's side menu, but you can still access it via a direct link: http://localhost:4200/with-amcharts4 (the project's port can be different).

The example's code is very similar to the code of the amCharts 5 example:

In the with-amcharts4.component.html file, we add a container for amCharts and subscribe to the reportcomplete event.
In the with-amcharts4.component.ts file, we:
1. Import amCharts 4 and Flexmonster Connector for amCharts.
2. Define the reportcomplete event's handler and chart-drawing functions.

Learn more about integration with amCharts.