Integration with FusionCharts

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

Watch the tutorial in the video format: Pivot table with FusionCharts.

Supported chart types

Flexmonster supports the following FusionCharts types:

• area2d (demo)
• bar2d (demo)
• bar3d (demo)
• column2d (demo)
• column3d (demo)
• doughnut2d (demo)
• doughnut3d (demo)
• line (demo)
• marimekko (demo)
• msarea (demo)
• msbar2d (demo)
• msbar3d (demo)
• mscolumn2d (demo)
• mscolumn3d (demo)
• mscolumn3dlinedy (demo)
• msline (demo)
• msspline (demo)
• mssplinearea (demo)
• pareto2d (demo)
• pareto3d (demo)
• pie2d (demo)
• pie3d (demo)
• radar (demo)
• spline (demo)
• splinearea (demo)
• stackedarea2d (demo)
• stackedbar2d (demo)
• stackedcolumn2d (demo)
• stackedcolumn3d (demo)
• Supported map types: maps/worldwithcountries (demo)

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/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="chartContainer"></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": "chartContainer"
  });

  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 Live example.

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

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:

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

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

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

Live example

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

Live example

What’s next?

You may be interested in the following articles:

• How to configure the data source
• How to customize the Toolbar
• How to add localization
• How to apply a CSS theme