Integration with any charting library

This tutorial describes how to connect a 3rd party visualization tool to Flexmonster.

You can integrate with any charting library by retrieving data from Flexmonster using the getData() API call, processing the data as needed, and then passing it to the chart.

We will integrate Flexmonster with ApexCharts and create an area chart. Integration with another library will have similar steps. See examples of integrating with different charting libraries, including d3.js, ECharts, and Charts.js.

Note Flexmonster also provides separate integration guides for Highcharts, amCharts, FusionCharts, and Google Charts.

Step 1. Configure Flexmonster

Step 1.1. Embed Flexmonster into your webpage. Your code should look similar to the following:

import Flexmonster from "flexmonster";
import "flexmonster/flexmonster.css";

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
});

Step 1.2. Configure the report: connect to your data source and define a slice. The fields you have specified in the slice will be shown on the chart.

See an example:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.csv",
    },
    slice: {
      rows: [{ 
        uniqueName: "Country" 
      }],
      columns: [{ 
        uniqueName: "[Measures]" 
      }],
      measures: [{ 
        uniqueName: "Price" 
      }],
    },
  },
});

Step 1.3. Provide your license key in the licenseKey property:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Your report configs
  },
  // Replace "XXXX-XXXX-XXXX-XXXX-XXXX" with your licence key
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
});

If you don’t have a license key, contact our team and request a special trial key.

Step 2. Add a charting library

Step 2.1. Install the charting library of your choice. In this case, ApexCharts:

npm install apexcharts

Step 2.2. Import the charting library in your project:

import ApexCharts from "apexcharts";

Step 2.3. Add a container for the chart:

<div id="chartContainer"></div>

Step 3. Create a chart instance

Step 3.1. Declare a variable for the chart:

let chart;

Step 3.2. If a chart is created before Flexmonster is fully loaded, the chart may receive empty data. To track whether the component is ready to provide data, handle the reportcomplete event:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Your report configs
  },
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
  reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
  }
});

Now, a chart will be created only when the data is loaded and the report is ready.

Step 3.3. Implement the createChart() function using the getData() API call, which requests data from the component:

function createChart() {
  pivot.getData(
    {},
    drawChart,
    updateChart
  );
};

Step 3.4. Implement the drawChart() function. For simplicity, we defined it according to the ApexCharts documentation. This function draws a chart using the processed data:

function drawChart(rawData) {
  // prepareData() transforms data to the format needed by the charting library
  // Will be implemented in step 4
  const data = prepareData(rawData);

  // Name of the first measure in the slice
  const measureName = rawData.meta.v0Name;

  const options = {
    chart: {
      height: 350,
      type: "area",
    },
    series: [
      {
        name: measureName,
        data: data,
      },
    ],
    // Set other chart configurations here if needed
  };

  chart = new ApexCharts(document.querySelector("#chartContainer"), options);
  chart.render();
}

Notice the const measureName = rawData.meta.v0Name; line. We used the rawData.meta object to extract the measure's name in the slice. Learn more about the MetaObject.

Step 3.5. Implement the updateChart() function, which will be triggered whenever the report is modified:

function updateChart(rawData) {
  chart.destroy();
  drawChart(rawData);
};

Step 4. Prepare the data for the chart

The most important part of drawing a chart is transforming data from the format returned by getData() to a format suitable for the visualization tool.

getData() outputs data and all information about it in the rawData object. Here’s a sample of the rawData.data array generated from the slice specified in step 1.2:

[
  {
    v0: 6221870
  }, 
  {
    r0: "Australia",
    r0_full: "country.[australia]",
    v0: 1372281
  }, 
  {
    r0: "Canada",
    r0_full: "country.[canada]",
    v0: 1034112
  }, 
  // ...
]

We are creating an ApexCharts area chart, so the data for the chart must follow its paired values format. We will define a function (for example, prepareData()) to:

Filter out records missing either a label (r0) or a value (v0).
Return a simplified array of objects in a paired values format, with x property for the label and y for the numeric value.

The prepareData() might look as follows:

function prepareData(rawData) {
  сonst data = [];
  for (let i = 0; i < rawData.data.length; i++) {
    const record = rawData.data[i];
    if (record["r0"] == undefined || record["v0"] == undefined) continue;
    let formattedRecord = {
      x: record["r0"],
      y: !isNaN(record["v0"]) ? record["v0"] : 0,
    };
    data.push(formattedRecord);
  }
  return data;
}

The returned data will have the following format:

[
  {
    x: "Australia",
    y: 1372281
  }, 
  {
    x: "Canada",
    y: 1034112
  },
  // ...
]

This data is now ready to be passed to our area chart.

ApexChart supports different data formats depending on the chart type. Here's an example of preparing data for a stacked column chart with a single-value structure.

Step 5. See the result

Run your project to see an area chart that displays the same data as the pivot table and reacts to updates: Live example.

Changes to Flexmonster Software License Agreement