☝️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
  • 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:

    amCharts 5

    npm install @amcharts/amcharts5

    amCharts 4

    npm install @amcharts/amcharts4

    Step 2.2. Include the amCharts files in your code:

    amCharts 5

    import * as am5 from "@amcharts/amcharts5";
    import * as am5percent from "@amcharts/amcharts5/percent";

    Read more about the amCharts installation.

    amCharts 4

    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:

    amCharts 5

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

    amCharts 4

    Create an empty variable:

    let chart;

    It will be initialized later in the function that draws the 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:

    amCharts 5

    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.

    amCharts 4

    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.):

    amCharts 5

    function updateChart(chartConfig, rawData) {
      root.container.children.clear();
      drawChart(chartConfig, rawData);
    }

    amCharts 4

    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:

    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:

    amCharts 5

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

    Live example

    Learn more about number formatting in amCharts 5.

    amCharts 4

    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;

    Live example

    Learn more about number formatting in amCharts 4.

    See also