Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • 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:

    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. Try it on JSFiddle.

    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:

    Parameter/Type Description
    options
    Object
    Allows setting options for data preprocessing.
    options.type
    String
    The chart type to prepare data for. This property is required.
    options.slice
    SliceObject
    optional 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: "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);
    }
    );
    }
    options.prepareDataFunction
    Function
    optional 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. It is ready to be used in the chart.
    • rawData. 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
    Function
    optional 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: