1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to database with Node.js
      4. Connecting to database with .NET
      5. Connecting to database with .NET Core
      6. Connecting to database with Java
      7. Connecting to database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Accelerator
      3. Installing Accelerator as a Windows Service
      4. Referring Accelerator as a DLL
      5. Accelerator security
      6. Configuring authentication process
      7. Configuring secure HTTPS connection
      8. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with Accelerator
      3. Configuring Mondrian roles
      4. Сonfiguring username/password protection
      5. Сonfiguring secure HTTPS connection
      6. Troubleshooting
    6. icCube
  4. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set report to the component
    8. Get report from the component
    9. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  5. Integration with frameworks
    1. Available tutorials
    2. Integration with AngularJS (v1.x)
    3. Integration with Angular
    4. Integration with React
    5. Integration with Webpack
    6. Integration with ASP.NET
    7. Integration with jQuery
    8. Integration with JSP
    9. Integration with TypeScript
    10. Integration with RequireJS
    11. Integration with PhoneGap
  6. Integration with charts
    1. Integration with Highcharts
    2. Integration with Google Charts
    3. Integration with FusionCharts
    4. Integration with any charting library
  7. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Customizing context menu
    4. Localizing component
  8. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.5 to 2.6
    4. Migration guide from 2.4 to 2.5
    5. Migration guide from 2.3 to 2.4
    6. Migration guide from 2.2 to 2.3
    7. Documentation for older versions
Table of contents

Integration with FusionCharts

This tutorial will help you to integrate Pivot Component with FusionCharts charting library.

Supported chart types

Flexmonster supports the following FusionCharts types:

However, if chart type you want is not on the list it’s possible to use prepareDataFunction to preprocess the data in your own way.

Adding FusionCharts

  1. Add to your HTML page the following pivot table based on CSV file.
    <div id="pivotContainer">The component will appear here</div>
    <script src="flexmonster/flexmonster.js"></script>
    	var pivot = new Flexmonster({
    		container: "pivotContainer",
    		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"
  2. Add FusionCharts.
    <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
  3. Add our connector for FusionCharts.
    <script src="flexmonster/lib/flexmonster.fusioncharts.js"></script>
  4. Add container for the chart.
    <div id="fusionchartContainer"></div>
  5. Add reportComplete event handler to know when the pivot table is ready to be a data provider.
    reportcomplete: function() {
  6. Add function to create the chart. This function is using a connector for FusionCharts from flexmonster.fusioncharts.js. The connector extends Flexmonster API with the following call: fusioncharts.getData(options, callbackHandler, updateHandler).
    function createFusionChart() {
    	var chart = new FusionCharts({
    		"type": "doughnut2d",
    		"renderAt": "fusionchartContainer"
        	type: chart.chartType()
    	}, function(data) {
    	}, function(data) {

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

Connector for FusionCharts

We added flexmonster.fusioncharts.js as a connector between our component and FusionCharts. 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 parameters:
    • type – String. Chart type to prepare data for. This property is required.
    • slice (optional) – Object. Defines the slice for which the data should be returned (for JSON, CSV and OCSV data sources only). If not defined, the API call will return data displayed in the pivot table.
        function createFusionChart() {
        var chart = new FusionCharts({
          "type": "doughnut2d",
          "renderAt": "fusionchartContainer"
          type: chart.chartType(),
          slice: {
            rows: [{uniqueName: "Country"}],
            columns: [{uniqueName: "[Measures]"}],
            measures: [{uniqueName: "Price"}, {uniqueName: "Discount"}]
        }, function(data) {
        }, function(data) {
    • prepareDataFunction (optional) - An external function. If the connector does not include the necessary type of chart or you need to preprocess the data in a different way - please use prepareDataFunction. prepareDataFunction gets two input parameters: rawData - raw data (check the structure of rawData in getData()); options - object with options set in fusioncharts.getData() function. Try it in 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. Gets two input parameters - data and rawData. data is ready to be used in the chart. rawData is passed just in case you need access to rawData.meta properties (check the structure of rawData in getData()), for example, to define number formatting.
  • updateHandler (optional) - Function. Gets two input parameters - data and rawData. Specifies what will happen once data in the Pivot Table is filtered/sorted/etc.

The connector has API call for defining number formatting for FusionCharts: fusioncharts.getNumberFormat(format:Object) - Object. Gets pivot format and returns format object for number formatting in FusionCharts. You may need this call when you are defining your own prepareDataFunction and want to use the 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 as is in chart object for FusionCharts. Here is an example of using fusioncharts.getNumberFormat call inside prepareDataFunction:

var format = 
for (var prop in format) {
    output.chart[prop] = format[prop];

In case you need to define a number format for the second Y axis for FusionChart, you can just add "s" prefix to each property of the returned format object when copying them to chart object, as follows:

var format2 = 
for (var prop in format2) {
    output.chart["s"+prop] = format2[prop];

Try it in JSFiddle.