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 Vue 3. They are provided within our sample Vue 3 project.

    Learn more about these examples:

    Note In most examples, Flexmonster is added to a Vue component using Options API. For an example of embedding Flexmonster using Composition API, see this example: Interacting with Flexmonster in Composition API.

    Creating the pivot table

    The first example demonstrates how to embed Flexmonster into your project with the Pivot component. See the source code:

    Notice how initialization parameters are specified in Pivot:

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

    Flexmonster has more initialization parameters. Have a look at all of them.

    Interacting with Flexmonster in CompositionAPI

    This example shows how to embed Flexmonster in a Vue 3 project using Composition API. See the source code:

    Check out the <script> section for an example of interaction with Flexmonster in Composition API:

    ES6

    <script setup>
    import { ref } from 'vue';
    
    let pivot = ref(null);
        
    function customizeToolbar(toolbar){
      toolbar.showShareReportTab = true;
    }
    
    function reportCompleteHandler(){
      let report = pivot.value.flexmonster.getReport();
      console.log("Flexmonster report configuration >> ", report);
    }
    </script>

    TypeScript

    <script setup lang="ts">
    import Pivot from "vue-flexmonster/vue3";
    import * as Flexmonster from "flexmonster/types/flexmonster";
    import { Ref, ref } from 'vue';
     
    interface FlexmonsterPivot {
      flexmonster: Flexmonster.Pivot;
    }
     
    let pivot: Ref<FlexmonsterPivot | null> = ref(null);
        
    function customizeToolbar(toolbar: Flexmonster.Toolbar) : void {
      toolbar.showShareReportTab = true;
    }
     
    function reportCompleteHandler() : void {
      let report = pivot.value?.flexmonster.getReport();
      console.log("Flexmonster report configuration >> ", report);
    }
    </script>

    Handling events

    This usage example focuses on Flexmonster events. See the source code:

    The example 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 <script> section. To subscribe to an event, we use the on() method:

    ES6

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

    TypeScript

    ((this.$refs.pivot as typeof Pivot)
    .flexmonster as Flexmonster.Pivot).on(eventName, () => {
      // handle the event
    });

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

    ES6

    this.$refs.pivot.flexmonster.off(eventName);

    TypeScript

    ((this.$refs.pivot as typeof Pivot)
    .flexmonster as Flexmonster.Pivot).off(eventName);

    See the full list of Flexmonster events in our documentation.

    Using API calls

    The Using API calls section is about interacting with the component through API calls. See the source code:

    Use the toggle buttons to enable the read-only mode or switch between the grid and charts.

    Check out the <script> section to see how the API calls are used:

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

      ES6

      showChart: function () {
      this.$refs.pivot.flexmonster.showCharts("column");
      },
      showGrid: function () {
      this.$refs.pivot.flexmonster.showGrid();
      }

      TypeScript

      showChart(): void {
      ((this.$refs.pivot as typeof Pivot)
      .flexmonster as Flexmonster.Pivot).showCharts("column");

      }, showGrid(): void {
      ((this.$refs.pivot as typeof Pivot)
      .flexmonster as Flexmonster.Pivot).showGrid();

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

      ES6

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

      TypeScript

      readOnly(): void {
        ((this.$refs.pivot as typeof Pivot)
        .flexmonster as Flexmonster.Pivot).setOptions({
          readOnly: true,
        });
        ((this.$refs.pivot as typeof Pivot)
        .flexmonster as Flexmonster.Pivot).refresh();
      }

    See the full list of Flexmonster API calls here.

    Updating data

    The Updating data section shows how to refresh data at runtime. See the source code:

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

    ES6

    updateTheData: function () {
      this.data = [
        // updated data
      ];
      // updating the data in Flexmonster
      this.$refs.pivot.flexmonster.updateData({ data: this.data });
    }

    TypeScript

    updateTheData(): void {
      this.data = [
        // updated data
      ];
      // updating the data in Flexmonster
      ((this.$refs.pivot as typeof Pivot)
      .flexmonster as Flexmonster.Pivot).updateData({ data: this.data });
    }

    Customizing the Toolbar

    The Customizing the Toolbar section contains an example of Toolbar customization. See the source code:

    Flexmonster is subscribed to the beforetoolbarcreated event in the <template> section:

    <Pivot 
      ref="pivot" 
      ...
      v-bind:beforetoolbarcreated="customizeToolbar"
      ...
    />

    The customizeToolbar() handler is defined as follows:

    ES6

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

    TypeScript

    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: 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. See the source code:

    Check out the <template> section to see how customizeCell is defined:

    <Pivot
      ref="pivot"
      ...
      v-bind:customizeCell="customizeCellFunction"
      ...
    />

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

    ES6

    customizeCellFunction: function (cell, data) {
      if (data.measure && data.measure.name == "Price") {
        let backgroundColor = "#00A45A";
        let textShadowColor = "#095231";
        let borderColor = "#009552";
        cell.style["background-color"] = backgroundColor;
        cell.style["color"] = "white";
        cell.style["font-weight"] = "bold";
        cell.style["text-shadow"] = `0px 2px 3px ${textShadowColor}`;
        cell.style["border-bottom"] = `1px solid ${borderColor}`;
        cell.style["border-right"] = `1px solid ${borderColor}`;
      }
    }

    TypeScript

    customizeCellFunction(
      cell: Flexmonster.CellBuilder,
      data: Flexmonster.CellData
    ): void {
      if (data.measure && data.measure.uniqueName == "Price") {
        let backgroundColor = "#00A45A";
        let textShadowColor = "#095231";
        let borderColor = "#009552";
        cell.style = {
          ...cell.style,
          background-color: backgroundColor,
          color: "white",
          font-weight: "bold",
          text-shadow: `0px 2px 3px ${textShadowColor}`,
          border-bottom: `1px solid ${borderColor}`,
          border-right: `1px solid ${borderColor}`,
        };
      }
    }

    Learn more about customizing the grid.

    Integrating with Highcharts

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

    In the <template> section, we add a container for Highcharts and subscribe Flexmonster to the reportcomplete event:

    <Pivot
      ref="pivot"
      ...
      v-bind:reportcomplete="reportComplete"
      ...
    />
    
    <div class="chart-container">
      <div id="highcharts-container"></div>
    </div>

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

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

    The <script> section also contains the chart-drawing function and the reportComplete() handler:

    ES6

    drawChart: function () {
      this.$refs.pivot.flexmonster.highcharts.getData(
        // Creating and configuring the chart
      );
    },
    reportComplete: function () {
      this.$refs.pivot.flexmonster.off("reportcomplete");
      this.drawChart();
     }

    TypeScript

    drawChart(): void {
      ((this.$refs.pivot as typeof Pivot)
      .flexmonster as Flexmonster.Pivot).highcharts?.getData(
        // Creating and configuring the chart
      );
    },
    reportComplete(): void {
      ((this.$refs.pivot as typeof Pivot)
      .flexmonster as Flexmonster.Pivot).off("reportcomplete");
      this.drawChart();
    }

    Learn more about integration with Highcharts.

    Integrating with amCharts

    The With amCharts section provides a dashboard with Flexmonster and amCharts. See the source code:

    In the <template> section, we add a container for amCharts and subscribe Flexmonster to the reportcomplete event:

    <Pivot
      ref="pivot"
      ...
      v-bind:reportcomplete="reportComplete"
      ...
    />
    
    <div class="chart-container">
      <div id="amcharts-container" style="width: 100%; height: 500px;"></div>
    </div>

    The amCharts library and Flexmonster Connector for amCharts are imported in the <script> section:

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

    The <script> section also contains the reportComplete() handler and chart-drawing functions:

    ES6

    reportComplete: function () {
      this.$refs.pivot.flexmonster.off("reportcomplete");
      this.drawChart();
    },
    drawChart: function () {
      //Running Flexmonster's getData method for amCharts
      this.$refs.pivot.flexmonster.amcharts.getData(
        {},
        this.createChart.bind(this),
        this.updateChart.bind(this)
      );
    },
    createChart: function (chartData, rawData) {
      // Creating and configuring the chart
    },
    updateChart: function (chartData, rawData) {
      // Updating the chart
    }

    TypeScript

    reportComplete(): void {
      ((this.$refs.pivot as typeof Pivot)
      .flexmonster as Flexmonster.Pivot).off("reportcomplete");
      this.drawChart();
    },
    drawChart(): void {
      //Running Flexmonster's getData method for amCharts
      ((this.$refs.pivot as typeof Pivot)
      .flexmonster as Flexmonster.Pivot).amcharts?.getData(
        {},
        this.createChart.bind(this),
        this.updateChart.bind(this)
      );
    },
    createChart(
      chartData: Flexmonster.GetDataValueObject,
      rawData: Flexmonster.GetDataValueObject
    ): void {
      // Creating and configuring the chart
    },
    updateChart(
      chartData: Flexmonster.GetDataValueObject,
      rawData: Flexmonster.GetDataValueObject
    ): void {
      // Updating the chart
    }

    Learn more about integration with amCharts.

    See also