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

    Usage examples

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

    Learn more about these examples:

    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);

    Learn more about Flexmonster’s events in Angular: Using methods and events.

    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();

      }

    Learn more about Flexmonster’s API calls in Angular: Using methods and events.

    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.

    Customizing the Toolbar

    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

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

    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 module and Flexmonster Connector for amCharts are imported in the with-amcharts.component.ts file:

    // Importing amCharts
    import * as am4core from '@amcharts/amcharts4/core';
    import * as am4charts from '@amcharts/amcharts4/charts';
    import am4themes_animated from '@amcharts/amcharts4/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
    }

    Learn more about integration with amCharts.

    See also