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 shows how to integrate Flexmonster with amCharts — a JavaScript library for interactive data visualization. Flexmonster supports amCharts 5 and amCharts 4.
Watch the tutorial in the video format: Pivot table with amCharts.
This guide demonstrates JavaScript-based integration. To integrate Flexmonster with amCharts in a front-end framework, check out our sample projects.
For seamless integration with the amCharts library, Flexmonster offers the Connector for amCharts. The Connector provides ready-to-use methods for passing data from Flexmonster to amCharts in the required format.
The Connector for amCharts is an add-on to Flexmonster located in the lib/flexmonster.amcharts.js
file within the Flexmonster package. The code is open-source, so you can extend it with custom logic or adapt it to suit your project’s needs. See the Connector’s API reference.
Flexmonster supports all chart types available in amCharts 5 and amCharts 4.
Visit the Examples page for ready-to-use examples of integration with different chart types.
The steps below describe how to create a pie chart based on data from Flexmonster. The process is the same for other chart types.
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: "Business Type" },
],
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 amCharts with the following command:
npm install @amcharts/amcharts5
npm install @amcharts/amcharts4
Step 2.2. Include the amCharts files in your code:
import * as am5 from "@amcharts/amcharts5";
import * as am5percent from "@amcharts/amcharts5/percent";
Read more about the amCharts installation.
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
Read more about the amCharts installation.
Step 2.3. Add a container for the chart:
<div id="chartContainer"></div>
Note If you are integrating with amCharts 5, explicitly set the height for your container in CSS styles. Otherwise, the created chart will not be visible.
Step 2.4. Declare a global variable that will be used to draw and update the chart:
In amCharts 5, charts should be created in a root element. Create the root element in the container we have added in step 2.3:
const root = am5.Root.new("chartContainer");
Create an empty variable:
let chart;
It will be initialized later in the function that draws the chart.
Step 3.1. Add Flexmonster Connector for amCharts to your webpage:
import "flexmonster/lib/flexmonster.amcharts.js"
Step 3.2. A chart should be created only when Flexmonster is fully loaded. Otherwise, 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",
report: {
// Your report configs
},
licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
reportcomplete: function() {
pivot.off("reportcomplete");
createChart();
}
});
As a result, a chart will be created only when the data is loaded and the report is ready.
Step 3.3. Implement the createChart()
function. It will use the Connector’s amcharts.getData() method, which requests data from the component and returns it in a format required by amCharts:
function createChart() {
pivot.amcharts.getData({},
// Function called when data for the chart is ready
drawChart,
// Function called when the report is updated
updateChart);
}
Step 3.4. Implement the drawChart()
function. This function initializes the chart, configures it, and fills the chart with data provided by the amcharts.getData() method:
function drawChart(chartConfig, rawData) { // Create the chart let chart = root.container.children.push( am5percent.PieChart.new(root, {}) ); // Create and configure pie series let series = chart.series.push( am5percent.PieSeries.new(root, { valueField: pivot.amcharts.getMeasureNameByIndex(rawData, 0), categoryField: pivot.amcharts.getCategoryName(rawData), }) ); series.slices.template.setAll({ stroke: am5.color("#fff"), strokeWidth: 2, }); series.labels.template.setAll({ fontSize: 12 }); // Fill the chart with the data from Flexmonster series.data.setAll(chartConfig.data); }
Notice the following lines in the code snippet:
am5percent.PieSeries.new(root, { categoryField: pivot.amcharts.getCategoryName(rawData), valueField: pivot.amcharts.getMeasureNameByIndex(rawData, 0), });
The amcharts.getCategoryName() method is used to set the categoryField
for the pie series. Then, amcharts.getMeasureNameByIndex() sets the valueField
.
For more details on how the pie chart is created, see the Pie chart section. If you're creating a different chart type, refer to the amCharts documentation for details about chart configuration.
function drawChart(chartData, rawData) { // Initialize the chart chart = am4core.create("chartContainer", am4charts.PieChart); // Fill the chart with the data from Flexmonster chart.data = chartData.data; // Create and configure pie series let series = chart.series.push(new am4charts.PieSeries()); series.dataFields.category = pivot.amcharts.getCategoryName(rawData); series.dataFields.value = pivot.amcharts.getMeasureNameByIndex(rawData, 0); series.slices.template.stroke = am4core.color("#fff"); series.slices.template.strokeWidth = 2; series.labels.template.fontSize = 12; }
Notice the following lines in the code snippet:
series.dataFields.category = pivot.amcharts.getCategoryName(rawData); series.dataFields.value = pivot.amcharts.getMeasureNameByIndex(rawData, 0);
The amcharts.getCategoryName() method is used to set the category name for the amCharts Category axis. Then, amcharts.getMeasureNameByIndex() sets the value for the Value axis.
For more details on how the pie chart is created, see the Pie chart section. If you're creating a different chart type, refer to the amCharts documentation for details about chart configuration.
Step 3.5. Implement the updateChart()
function that will redraw the chart once the report is updated (e.g., on filtering, sorting, etc.):
function updateChart(chartConfig, rawData) { root.container.children.clear(); drawChart(chartConfig, rawData); }
function updateChart(chartConfig, rawData) { chart.dispose(); drawChart(chartConfig, rawData); }
Run your project and see an interactive pie chart displaying data from the component. Check out a live example on JSFiddle:
You can also watch our video tutorial that covers the integration process:
We prepared ready-to-use sample projects for the most popular front-end frameworks. Each project includes several examples, including integration with amCharts. Find a sample project for a framework of your choice:
Flexmonster Connector for amCharts provides the amcharts.getNumberFormatPattern() method, which converts Flexmonster’s FormatObject to the amCharts number formatting string in the format "<positive format>|<negative format>"
, for example "'$'#,###|'($'#,###s')'"
.
The amcharts.getNumberFormatPattern()
method considers the following FormatObject properties:
decimalPlaces
maxDecimalPlaces
negativeNumberFormat
(only the -1
and (1)
formats are available)currencySymbol
positiveCurrencyFormat
negativeCurrencyFormat
(only the $-1
, -1$
, ($1)
, and (1$)
formats are available)isPercent
Regardless of the FormatObject configuration, the following properties have constant values in amCharts:
thousandsSeparator
: ","
decimalSeparator
: "."
amCharts imposes this limitation because it uses predefined separators for decimals and thousands.
Number formatting can be applied to both amCharts 5 and amCharts 4:
root = am5.Root.new("amcharts-container");
// Convert the Flexmonster number format to a format required by amCharts
// In this example, the numberFormat will be "'$'#,###|'($'#,###s')'"
let numberFormat = pivot.amcharts.getNumberFormatPattern(rawData.meta.formats[0]);
// Apply the number format to amCharts
root.numberFormatter.set("numberFormat", numberFormat);
Learn more about number formatting in amCharts 5.
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Convert the Flexmonster number format to a format required by amCharts
// In this example, the numberFormat will be "'$'#,###|'($'#,###s')'"
let numberFormat = pivot.amcharts.getNumberFormatPattern(rawData.meta.formats[0]);
// Apply the number format to the chart's axis
valueAxis.numberFormatter = new am4core.NumberFormatter();
valueAxis.numberFormatter.numberFormat = numberFormat;
Learn more about number formatting in amCharts 4.