Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Integration with FusionCharts

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

    This guide contains the following sections:

    Supported chart types

    Flexmonster supports the following FusionCharts types:

    If the chart type that you want to use is not on the list, it is possible to use prepareDataFunction to preprocess the data to fit your preferences.

    More ready-to-use examples of integration with FusionCharts you can find on the Examples page.

    Adding FusionCharts

    Step 1. Add the component using data from a CSV file to your HTML page. Replace XXXX-XXXX-XXXX-XXXX-XXXX with your license key. If you don’t have a license key, contact our team and request a special trial key.

    <div id="pivotContainer">The component will appear here</div>
    <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
    
    <script>
        let pivot = new Flexmonster({
            container: "pivotContainer",
            componentFolder: "https://cdn.flexmonster.com/",
            toolbar: true,
            report: {
                dataSource: {
                    filename: "data.csv"
                },
                slice: {
                    rows: [
                        { uniqueName: "Country" }
                    ],
                    columns: [
                        { uniqueName: "Business Type" },
                        { uniqueName: "[Measures]" }
                    ],
                    measures: [
                        { uniqueName: "Price" }
                    ]
                }
            },
            licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
        });
    </script>

    Step 2. Add FusionCharts:

    <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>

    Step 3. Add Flexmonster Connector for FusionCharts:

    <script src="https://cdn.flexmonster.com/lib/flexmonster.fusioncharts.js"></script>

    Step 4. Add a container for the chart:

    <div id="fusionchartContainer"></div>

    Step 5. Add a reportComplete event handler to know when the pivot table is ready to be a data provider:

    reportcomplete: function() {
    pivot.off("reportcomplete");
    createFusionChart();
    }

    Step 6. Add a function to create the chart. This function uses the Connector for FusionCharts from flexmonster.fusioncharts.js. The Connector extends the Flexmonster API with the following call: fusioncharts.getData(options, callbackHandler, updateHandler).

    function createFusionChart() {
        let chart = new FusionCharts({
            "type": "doughnut2d",
            "renderAt": "fusionchartContainer"
        });
    
        pivot.fusioncharts.getData({
            type: chart.chartType()
        }, function(chartConfig) {
            chart.setJSONData(chartConfig);
            chart.render();
        }, function(chartConfig) {
            chart.setJSONData(chartConfig);
        });
    }

    You will see a doughnut2d chart that displays the same data that is shown in the pivot Flexmonster instance and it will react to updates. Try it on JSFiddle.

    Flexmonster Connector for FusionCharts

    flexmonster.fusioncharts.js is a connector between our component and FusionCharts. The fusioncharts.getData() method requests data from the pivot table and preprocesses it to the appropriate format for the required type of chart.

    fusioncharts.getData(options:Object, callbackHandler:Function, updateHandler:Function) has the following parameters:

    • options – Object. This object has the following properties:
      • type – String. The chart type to prepare data for. This property is required.
      • slice optional – Object. Defines the slice from which the data should be returned (for JSON and CSV data sources only). If not defined, the API call will return data currently displayed in the pivot table.
        Example:
        function createFusionChart() {
        let chart = new FusionCharts({
        "type": "doughnut2d",
        "renderAt": "fusionchartContainer"
        });

        pivot.fusioncharts.getData({
        type: chart.chartType(),
        slice: {
        rows: [{uniqueName: "Country"}],
        columns: [{uniqueName: "[Measures]"}],
        measures: [
        { uniqueName: "Price" },
        { uniqueName: "Discount" }
        ]
        },

        }, function(chartConfig) {
        chart.setJSONData(chartConfig);
        chart.render();
        }, function(chartConfig) {
        chart.setJSONData(chartConfig);
        });
        }
      • prepareDataFunction optional – An external function. If the Connector does not include the necessary type of chart or if you need to preprocess the data differently, use this function. prepareDataFunction takes two input parameters: rawData – the raw data (check out the structure of rawData in getData()); options – an object with options set in fusioncharts.getData(). Try it on JSFiddle.
    • callbackHandler – Function. Specifies what will happen once data is ready. Additional options can be specified and then data can be passed directly to the charting library. Takes two input parameters – chartConfig and rawData. chartConfig is ready to be used in the chart. rawData is passed just in case you need access to rawData.meta properties (check out the structure of rawData in getData()), for example to define number formatting.
    • updateHandler optional – Function. Takes two input parameters – chartConfig and rawData. Specifies what will happen once data in the pivot table is filtered/sorted/etc or a number format is changed.

    The Connector has an API call for defining the number formatting for FusionCharts: fusioncharts.getNumberFormat(format:Object) – Object. Takes a pivot table FormatObject and returns a format object for number formatting in FusionCharts. You may need this call when you are defining your own prepareDataFunction and want to use number formatting from the pivot table on the chart. The returned object has the following parameters:

    • decimalSeparator
    • decimals
    • forceDecimals
    • numberPrefix
    • thousandSeparator

    They can be used in the chart object for FusionCharts. Here is an example of using the fusioncharts.getNumberFormat:

    let format =
        pivot.fusioncharts.getNumberFormat(data.meta.formats[0]);
    for (let prop in format) {
        chart[prop] = format[prop];
    }

    See the full code on JSFiddle.

    If you need to define a number format for the second Y axis, just add an "s" prefix to each property of the returned format object when copying them to the chart object:

    let anotherFormat = 
        pivot.fusioncharts.getNumberFormat(data.meta.formats[1]);
    for (let prop in anotherFormat) {
        chart["s" + prop] = anotherFormat[prop];
    }

    Try it on JSFiddle.

    What’s next?

    You may be interested in the following articles: