Usage examples

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

Creating the pivot table

The Pivot table demo demonstrates how to embed Flexmonster into your project using the <Flexmonster> component.

Notice how initialization parameters are specified in <Flexmonster>:

<Flexmonster
  toolbar={true}
  height="600"
  report="https://cdn.flexmonster.com/github/demo-report.json"
  shareReportConnection={{
    url: "https://olap.flexmonster.com:9500",
  }}
  beforetoolbarcreated={customizeToolbar}
/>

Learn more about <Flexmonster> and its properties: The <Flexmonster> component.

Handling events

The Handling events 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.

To subscribe to an event, we use the on() method:

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

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

pivot.off(eventName);

See the full list of Flexmonster events in our documentation.

Learn more about using Flexmonster events in Svelte.

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.

See how the API calls are used:

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

  function showChart(): void {
    pivot.showCharts(
      "column"
    );
  }
  
  function showGrid(): void {
    pivot.showGrid();
  }
  

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

  function readOnly(): void {
    pivot.setOptions({
      readOnly: true,
    });
    pivot.refresh();
  }
  

See the full list of Flexmonster API calls.

Learn more about using Flexmonster methods in Svelte.

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:

let data = [
  // Updated data
];

function updateTheData(): void {
  // Updating the data in Flexmonster
  pivot.updateData({ data: data });
}

Learn more about using Flexmonster methods in Svelte.

Customizing the Toolbar

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

Flexmonster is subscribed to the beforetoolbarcreated event during initialization:

<Flexmonster
  bind:pivot
  toolbar={true}
  // ...
  beforetoolbarcreated={customizeToolbar}
/>

The customizeToolbar() handler is defined as follows:

function customizeToolbar(toolbar: Flexmonster.Toolbar): void {
  let tabs: Flexmonster.ToolbarTab[] = toolbar.getTabs();
  toolbar.getTabs = () => {
    tabs = [];
    // Add new tab
    tabs.push({
      id: "fm-tab-newtab",
      title: "New Tab",
      handler: 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:

<Flexmonster
  bind:pivot
  toolbar={true}
  // ...
  customizeCell={customizeCellFunction}
  // ...
/>

The customizeCellFunction() is defined in the <script> section. This function applies custom CSS to the cells with the "Price" measure:

function customizeCellFunction(
  cell: Flexmonster.CellBuilder,
  data: Flexmonster.CellData,
): void {
  if (data.measure && data.measure.uniqueName == "Price") {
  // 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. The implementation is located in with-highcharts/+page.svelte.

The Highcharts module and Flexmonster Connector for Highcharts are imported in the <script> section:

import Highcharts from "highcharts";
import "flexmonster/lib/flexmonster.highcharts";

In the markup, we add a container for Highcharts and then get a reference to it using bind:this:

<script lang="ts">
  // ...
  let chartdiv: HTMLDivElement;
  // ...
</script>


<div class="chart-container">
  <div
    bind:this={chartdiv}
    id="highcharts-container"
    style="width: 100%; height: 500px"
  ></div>
</div>

Then we subscribe Flexmonster to the reportcomplete event via <Flexmonster> props:

<Flexmonster
  bind:pivot
  toolbar={true}
  // ...
  reportcomplete={reportComplete}
  // ...
/>

Finally, we define the chart-drawing function and the reportComplete() handler in the <script> section:

function reportComplete(): void {
  pivot.off("reportcomplete", reportComplete);
  drawChart();
}

function drawChart(): void {
  pivot.highcharts?.getData(
    // Creating and configuring the chart
  );
}

Learn more about integration with Highcharts.

Integrating with amCharts

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

// 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";

<script lang="ts">
  // ...
  let chartdiv: HTMLDivElement;
  // ...
</script>

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

<Flexmonster
  bind:pivot
  toolbar={true}
  // ...
  reportcomplete={reportComplete}
  // ...
/>

function reportComplete(): void {
  pivot.off("reportcomplete", reportComplete);
  drawChart();
}

function drawChart(): void {
  // Running Flexmonster's getData method for amCharts
  pivot.amcharts?.getData({},
    createChart,
    updateChart
  )
}

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

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

Learn more about integration with amCharts.

See also

• Integration with Svelte
• Using methods and events
• About the <Flexmonster> component