Integration with amCharts

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.

Flexmonster Connector for amCharts

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.

Supported chart types

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.

Integrating with amCharts

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. 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: "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. Add amCharts

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

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

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:

const root = am5.Root.new("chartContainer");

let chart;

Step 3. Display the data on 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);
}

am5percent.PieSeries.new(root, {
  categoryField: pivot.amcharts.getCategoryName(rawData),
  valueField: pivot.amcharts.getMeasureNameByIndex(rawData, 0),
});

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;
}

series.dataFields.category = pivot.amcharts.getCategoryName(rawData);
series.dataFields.value = pivot.amcharts.getMeasureNameByIndex(rawData, 0);

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);
}

Step 4. See the result

Run your project and see an interactive pie chart displaying data from the component. Check out a live example on JSFiddle:

• Flexmonster with amCharts 5
• Flexmonster with amCharts 4

You can also watch our video tutorial that covers the integration process:

Examples with front-end frameworks

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:

Using Flexmonster number formatting in amCharts

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.

Example

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);

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;

See also

• API reference of Flexmonster Connector for amCharts
• More examples with amCharts
• Supported data sources
• Customizing the component