☝️Small business or a startup? See if you qualify for our special offer.
+
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Usage examples

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

    Creating the pivot table

    The Pivot table demo 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"
    :shareReportConnection="{
    url: 'https://olap.flexmonster.com:9500',
    }"
    :beforetoolbarcreated="customizeToolbar"
    />

    Learn more about <Pivot> and its parameters: The <Pivot> component.

    Creating the pivot table using Options API

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

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

    ES6

    <script>
    import { defineComponent } from "vue";

    export default defineComponent({
    name: "OptionsAPIDemo",
    methods: {
    customizeToolbar: function (toolbar) {
    toolbar.showShareReportTab = true;
    },
    reportCompleteHandler: function () {
    let report = this.$refs.pivot.flexmonster.getReport();
    console.log("Flexmonster report configuration >> ", report);
    },
    },
    });
    </script>

    TypeScript

    <script lang="ts">
    import { defineComponent } from "vue";
    import Pivot from "vue-flexmonster/vue3";

    export default defineComponent({
    name: "OptionsAPIDemo",
    components: {
    Pivot,
    },
    methods: {
    customizeToolbar(toolbar: Flexmonster.Toolbar): void {
    toolbar.showShareReportTab = true;
    },
    reportCompleteHandler(): void {
    let report = ((this.$refs.pivot as typeof Pivot).flexmonster as Flexmonster.Pivot).getReport();
    console.log("Flexmonster report configuration >> ", report);
    },
    },
    });
    </script>

    Handling events

    This Handling events 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:

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

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

    pivot.value.flexmonster.off(eventName);

    See the full list of Flexmonster events in our documentation.

    Learn more about using Flexmonster events in Vue 3.

    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 showCharts() and showGrid() and methods allow switching between the views:
      function showChart() {
      pivot.value.flexmonster.showCharts("column");
      }

      function showGrid() {
      pivot.value.flexmonster.showGrid();
      }
    • The setOptions() API call is used to make Flexmonster read-only:
      function readOnly() {
        pivot.value.flexmonster.setOptions({
          readOnly: true
        });
        pivot.value.flexmonster.refresh();
      }

    See the full list of Flexmonster API calls.

    Learn more about using Flexmonster methods in Vue 3.

    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:

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

    Learn more about using Flexmonster methods in Vue 3.

    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"
    ...
    :beforetoolbarcreated="customizeToolbar"
    ...
    />

    The customizeToolbar() handler is defined as follows:

    ES6

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

    TypeScript

    function customizeToolbar(toolbar: Flexmonster.Toolbar): void {
    let tabs: Flexmonster.ToolbarTab[] = toolbar.getTabs();
    toolbar.getTabs = () => {
    tabs = [];
    // Add a 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(). See the source code:

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

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

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

    ES6

    function customizeCellFunction(cell, data) {
    if (data.measure && data.measure.uniqueName == "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

    function 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 cells.

    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"
    ...
    :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";
    import "highcharts/modules/accessibility";
    // Importing Flexmonster Connector for Highcharts
    import "flexmonster/lib/flexmonster.highcharts.js";

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

    ES6

    function reportComplete() {
    pivot.value.flexmonster.off("reportcomplete");
    drawChart();
    }

    function drawChart() {
    pivot.value.flexmonster.highcharts.getData(
    {
    type: "spline",
    },
    function (data) {
    Highcharts.chart("highcharts-container", data);
    },
    function (data) {
    Highcharts.chart("highcharts-container", data);
    }
    );
    }

    TypeScript

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

    function drawChart(): void {
    pivot.value.flexmonster.highcharts.getData(
    {
    type: "spline",
    },
    function (data: Flexmonster.GetDataValueObject) {
    Highcharts.chart("highcharts-container", data as Highcharts.Options);
    },
    function (data: Flexmonster.GetDataValueObject) {
    Highcharts.chart("highcharts-container", data as Highcharts.Options);
    }
    );
    }

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

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

    <Pivot
    ref="pivot"
    ...
    :reportcomplete="reportComplete"
    ...
    />
    <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 <script> section:

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

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

    ES6

    function reportComplete() {
    pivot.value.flexmonster.off("reportcomplete");
    drawChart();
    }

    function drawChart() {
    // Running Flexmonster's getData() method for amCharts
    pivot.value.flexmonster.amcharts.getData(
    {},
    createChart,
    updateChart
    );
    }

    function createChart(chartData, rawData) {
    // Creating and configuring the chart
    }

    function updateChart(chartData, rawData) {
    root.dispose();
    createChart(chartData, rawData);
    }

    TypeScript

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

    function drawChart(): void {
    // Running Flexmonster's getData() method for amCharts
    pivot.value.flexmonster.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
    ): void {
    root?.dispose();
    createChart(chartData, rawData);
    }

    Learn more about integration with amCharts.

    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:5173/with-amcharts4 (the project's port can be different).

    Here is the example's source code:

    It is very similar to the code of the amCharts 5 example:

    • In the <template> section, we add a container for amCharts and subscribe to the reportcomplete event.
    • In the <script> section, 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.

    See also