Flexmonster Software License Agreement (“Agreement”) has been revised and is effective as of January 8, 2025.
The following modifications were made:
The modified version of Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after January 8, 2025, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license or maintenance after the effective date of these modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
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.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.1. Install ApexCharts with the following command:
npm install apexcharts
Step 2.3. Include ApexCharts in your code:
import ApexCharts from "apexcharts";
Step 2.3. Add a container for the chart:
<div id="chartContainer"></div>
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 charts configurations here if needed
};
chart = new ApexCharts(document.querySelector("#chartContainer"), options);
chart.render();
}
Notice the const measureName = rawData.meta.v0Name;
line. We used rawData.meta
to extract the measure's name in the slice. Learn more about MetaObject.
Step 3.5. Implement the updateChart()
function, which will be triggered whenever the report is modified:
function updateChart(rawData) {
chart.destroy();
drawChart(rawData);
};
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 must follow its paired values format. We will define a function (for example, prepareData()
) to:
r0
) or the value (v0
). 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
},
//...
]
ApexChart supports different data formats depending on the chart type. Here's an example of a stacked column chart with a single-value structure.
Run your project to see an area chart that displays the same data as the pivot table and reacts to updates: Live example.