Integration with FusionCharts

This tutorial will help you integrate Flexmonster with the FusionCharts charting library. You can also watch the tutorial in the video format: Pivot table with FusionCharts.

Check out ready-to-use examples of integration with FusionCharts on the Examples page.

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

Flexmonster Connector for FusionCharts

For easy integration with the FusionCharts library, Flexmonster offers the Connector for FusionCharts. The Connector has built-in functions for passing data from Flexmonster to FusionCharts in the required format.

The Connector for amCharts is located in the lib/flexmonster.fusioncharts.js file within the Flexmonster package. The code is open-source, so you can customize or extend it with your own logic to fit your project’s requirements. See the Connector’s API reference.

Supported chart types

Flexmonster supports the following FusionCharts types:

If the needed chart type is not in the list, see how to integrate with any chart type.

Integrating with FusionCharts

The steps below describe how to create a doughnut 2D chart based on data from Flexmonster. For integration with other chart types, refer to the FusionCharts 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 FusionCharts

Step 2.1. Install the FusionCharts library with the following command:

npm install fusioncharts

Step 2.2. Import the FusionCharts library:

import FusionCharts from "fusioncharts";
import Charts from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

Charts(FusionCharts);
FusionTheme(FusionCharts);

Step 2.3. Add a container for the chart:

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

Step 3. Display the data on the chart

Step 3.1. Include the Connector for FusionCharts in your project with the following line of code:

import "flexmonster/lib/flexmonster.fusioncharts.js"

Step 3.2. A chart should be created only when Flexmonster is fully loaded. Otherwise, the chart may receive empty data.

To ensure the component is ready to provide data, use 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 a function that creates a chart (e.g., createChart()). This function will use the fusioncharts.getData() method from the Connector. fusioncharts.getData() requests data from the component and preprocesses it to the format required by FusionCharts. Your code should look similar to the following:

function createChart() {
  let chart = new FusionCharts({
    "type": "doughnut2d",
    "renderAt": "chartContainer"
  });

  pivot.fusioncharts.getData(
    {
      type: chart.chartType()
    },
    // Function called when data for the chart is ready
    function(chartConfig) {
      chartConfig.chart.theme = "fusion";
      chart.setJSONData(chartConfig);
      chart.render();
    }, 
    // Function called when the report is updated
    function(chartConfig) {
      chartConfig.chart.theme = "zune";
      chart.setJSONData(chartConfig);
    }
  );
}

Step 4. See the result

Run your project and see a doughnut 2D chart displaying data from the component Live example.

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

Integrating with any chart type

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

To create a chart that is not on the list, you need to preprocess the data manually. It can be done using the options.prepareDataFunction parameter of fusioncharts.getData() Live example.

Using Flexmonster number formatting in FusionCharts

Flexmonster Connector for FusionCharts provides the fusioncharts.getNumberFormat() API call, which converts the Flexmonster FormatObject to the FusionCharts format object.

fusioncharts.getNumberFormat() considers the following FormatObject properties and converts them to FusionCharts equivalents:

• thousandsSeparator (thousandSeparator in FusionCharts)
• decimalSeparator (decimalSeparator in FusionCharts)
• decimalPlaces (decimals in FusionCharts)
• positiveCurrencyFormat (numberPrefix and numberSuffix in FusionCharts)

Regardless of the FormatObject configuration, the FusionCharts’ forceDecimals property has a constant value: 1.

Here is an example of using fusioncharts.getNumberFormat():

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

Live example

To apply a number format to the secondary Y-axis, add an "s" prefix to each property:

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

Live example

You can read more about FusionCharts number formatting in the FusionCharts documentation.

See also

• API reference of Flexmonster Connector for FusionCharts
• More examples with FusionCharts
• Supported data sources
• Customize Flexmonster