Menu
Free Trials
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:

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

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/lib/jquery.min.js"></script>
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
    	var pivot = $("#pivotContainer").flexmonster({
    		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>
    
  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() {
    	pivot.off("reportcomplete");
    	createFusionChart();
    }
    
  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"
    	});
    
    	pivot.fusioncharts.getData({
        	type: chart.chartType()
    	}, function(data) {
    		chart.setJSONData(data);
    		chart.render();
    	}, function(data) {
    		chart.setJSONData(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.

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"
        });
      
      
        pivot.fusioncharts.getData({
          type: chart.chartType(),
          slice: {
            rows: [{uniqueName: "Country"}],
            columns: [{uniqueName: "[Measures]"}],
            measures: [{uniqueName: "Price"}, {uniqueName: "Discount"}]
          },
        }, function(data) {
          chart.setJSONData(data);
          chart.render();
        }, function(data) {
          chart.setJSONData(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 = 
    pivot.fusioncharts.getNumberFormat(data.meta.formats[0]);
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 = 
    pivot.fusioncharts.getNumberFormat(data.meta.formats[1]);
for (var prop in format2) {
    output.chart["s"+prop] = format2[prop];
} 

Try it in JSFiddle.