React-FusionCharts

Step 1: Include react-fusioncharts.js

In your HTML, include react-fusioncharts.js after all other scripts:

<script type="text/javascript" src="/path/to/fusioncharts.js"></script>
<script type="text/javascript" src="/path/to/react.js"></script>
<script type="text/javascript" src="/path/to/react-fusioncharts.js"></script>

Step 2: Add the HTML element where FusionCharts is to be rendered

In your HTML, find the section where you wish to add the chart place a <div> for the FusionCharts to be rendered.

<div id='chart-container'></div>

Step 3: Populate required configurations

In your JavaScript code, define an object which consists of all the configurations and their values, required to get FusionCharts up.

var chartConfigs = {
    type: ...,
    renderAt: ...,
    className: ..., // ReactJS attribute-name for DOM classes
    dataFormat: ...,
    dataSource: ...
};

Step 4: Creating a Parent Component

For allowing charts to be interactive, FusionCharts are tied to a common parent ReactJS component. This parent component is responsible for managing the state for all the FusionCharts underneath itself. This state's properties are left open for the user to define. This is helpful when the user needs to store filters or the element which triggered the filter (we will come to this in the later steps).

Let's create a interactive dashboard, having a parent component say 'MyApp' and two FusionCharts(pie and column charts) underneath it. On the click of a slice of the pie chart, the data in the column chart should be updated. This is handled by a configuration 'impactedBy' (explained later in further steps). The object containing the configurations is passed to the FusionCharts component as 'props':

var MyApp = React.createClass({
    ...,
    render: funstion () {
        return (
            <ReactFC {...categoryChartConfigs} />
            <ReactFC {...revenueChartConfigs} />
        );
    }
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);

We recommend following the previous method of creating an object and passing it, but these configurations can be passed separately as well:

ReactDOM.render(
    <ReactFC
        type: ...,
        renderAt: ...,
        className: ...,
        dataFormat: ...,
        dataSource: ... />,
    document.getElementById('chart-container')
);

Step 5: Defining an event's behavior on filter

On click of a slice of pie chart, a filter should be applied with the value of the selected slice.

var categoryChartConfigs = {
    ...,
    events: {
        /***
        ** Slicing event of Pie Chart
        ***/
        slicingStart: function () {

            /***
            **  Call a function which sets the state of 'MyApp'
            **  with this filter value and the 'id' of this pie chart.
            ***/

        }
    }
};

Step 6: Storing the filters

Now before we propagate these filters to the other charts, we need to store them from where it can be accessible to other charts. This is done in the function that checks the state of the parent component.

We define a function to be called on the above slicing event, which sets this state with mandatorily two things:

• filterValue: the value of the selected slice
• filterSource: the id of the chart which triggered this slicing event

This function is defined in the parent component.

var MyApp = React.createClass({
    ....,
    storeFilters: function (fv, source) {

        /***
        ** Sets the state of 'MyApp'
        ***/
        this.setState({
            filterValue: fv,
            filterSource: source
        });
    },
    render: function () {
        var that = this;

        var categoryChartConfigs = {
                ...,
                events: {
                    slicingStart: function (a,b) {

                        /***
                        ** Calling the function to set state of 'MyApp'
                        ***/
                        that.storeFilters(a.data.categoryLabel, b.sender.id);
                    }
                }
            };

        var revenueChartConfigs = {...};

        /***
        **  Code to filter the
        **  data of column chart
        ***/

        return (
            <ReactFC {...categoryChartConfigs} />
            <ReactFC {...revenueChartConfigs} />
        );
    }
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);

Step 7: Propagating the filters

To use the interactive mode using the React-FusionCharts plugin, we need to define two configurations:

• eventSource: On an event trigger of a chart or an element, if we want to propagate filter(s) further to other charts, we define a configuration eventSource on the impacting chart. This configuration accepts a non-empty string of the id of the chart or the element who triggered those events.
• impactedBy: If we want a chart to react to an event of another chart or element, we define a configuration impactedBy on the impacted chart. This configuration accepts an array of id(s) of the element(s) who triggers those events.

This is an important step because internally the plugin then compares the value of eventSource with the value of impactedBy of a FusionChart. If there is a match, it updates itself.

From the state of the parent component MyApp, we pass the value of the property filterSource, to the configuration eventSource:

var MyApp = React.createClass({
    ....,
    storeFilters: function (fv, source) {...},
    render: function () {
        var that = this;

        var categoryChartConfigs = {...};

        var revenueChartConfigs = {
            ...,
            /***
            ** id of the FusionCharts that triggered
            ** event to filter a certain chart
            ***/
            eventSource: this.state.filterSource,
            impactedBy: ['category-chart'],
        };

        /***
        **  Code to filter the
        **  data of column chart
        ***/

        return (
            <ReactFC {...categoryChartConfigs} />
            <ReactFC {...revenueChartConfigs} />
        );
    }
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('chart-container')
);

Note: eventSource and impactedBy are mandatory configurations to be set for an impacting chart. But if a chart is just getting impacted, it needs the impactedBy configuration only.

And your chart should display when you load the page with interactivity.

Licensing

React-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can Download an evaluation. You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use) .