☝️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 Highcharts

    This tutorial will help you integrate Flexmonster with the Highcharts charting library.

    Watch the tutorial in the video format: Flexmonster Pivot with Highcharts.

    This guide demonstrates JavaScript-based integration. To integrate Flexmonster with Highcharts in a front-end framework, check out our sample projects.

    Flexmonster Connector for Highcharts

    For easy integration, Flexmonster offers the Connector for Highcharts. The Connector provides built-in methods for passing data from Flexmonster to Highcharts in the required format.

    The Connector for Highcharts is located in the flexmonster.highcharts.js file within the Flexmonster package. The code is open-source and can be extended with custom logic. Check out the Connector’s API reference.

    Supported chart types

    Flexmonster supports the following Highcharts types:

    List of supported chart types
    • Area series (demo)
    • Area range series (demo)
    • Area spline series (demo)
    • Area spline range (demo)
    • Bar chart (demo)
    • Bubble series (demo)
    • Column series (demo)
    • Column range (demo)
    • Error bar series (demo)
    • Funnel series (demo)
    • Line chart (demo)
    • Pie chart (demo)
    • Polygon series (demo)
    • Pyramid series (demo)
    • Scatter plot (demo)
    • Spline series (demo)
    • Waterfall chart (demo)

    If the needed chart type is not on the list, see the Integrating with any chart type section.

    Integrating with Highcharts

    The steps below describe how to create a line chart based on data received from Flexmonster. To integrate the component with other chart types, refer to the Highcharts documentation.

    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 Highcharts

    Step 2.1. Install Highcharts with the following command:

    npm install highcharts --save

    Step 2.2. Add Highcharts to your project:

    const Highcharts = require('highcharts');
    require('highcharts/modules/exporting');
    require('highcharts/modules/accessibility');

    Step 2.3. Add the <div> container for the chart:

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

    Step 3. Display the data on the chart

    Step 3.1. Add Flexmonster Connector for Highcharts to your project:

    import "flexmonster/lib/flexmonster.highcharts.js"

    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",
    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 highcharts.getData() API call. This method requests data from Flexmonster and transforms it to the format required by Highcharts:

    function createChart() {
    pivot.highcharts.getData(
    {
    type: "line"
    },
    // Function called when data for the chart is ready
    function(chartConfig) {
    Highcharts.chart("chartContainer", chartConfig);
    },
    // Function called when the report is updated
    function(chartConfig) {
    Highcharts.chart("chartContainer", chartConfig);
    }
    );
    }

    Step 4. See the result

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

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

    Integrating with any chart type

    Flexmonster Connector for Highcharts can prepare your data for a limited set of chart types.

    If you need to create a chart that is not on the list, preprocess your data manually using the options.prepareDataFunction parameter of highcharts.getData() Live example.

    Examples with front-end frameworks

    We created ready-to-use sample projects for the most popular front-end frameworks. Each project contains multiple examples, including integration with Highcharts. Find a sample project for a framework of your choice:

    Using Flexmonster number formatting in Highcharts

    Flexmonster Connector for Highcharts provides several functions for setting number formatting in Highcharts. All these functions take the Flexmonster’s FormatObject and return a Highcharts format string.

    The methods from the Connector consider the following FormatObject properties:

    • thousandsSeparator
    • decimalPlaces
    • currencySymbol
    • positiveCurrencyFormat

    In Highcharts, format strings are templates used for labels (e.g., tooltips or data labels). They include variables inside curly braces to represent different parts of a data point. See the list of such data points and corresponding Flexmonster API calls for obtaining them:

    Learn more in the Highcharts documentation.

    Check out an example of how the number format is applied for yAxis labels:

    chartConfig.yAxis[i].labels = {
    format: pivot.highcharts.getAxisFormat(currencyFormat)
    }

    Live example

    See also