Simple ReactJS component for FusionCharts JavaScript Charting Library.
This project allows to build ReactJS UI components for FusionCharts JavaScript Charting Library. It makes adding rich, interactive charting to your ReactJS Projects easy and works in the React Way.
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>
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>
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: ...
};
There are two definitive ways of building a FusionChart in React.js; either it is a part of a component heirarchy or is a lone chart. For a singular FusionChart, we can choose to make a component class or directly render with the React-FusionCharts component class. The object containing the configurations is passed to the FusionCharts component as 'props':
React.render(
<react_fc.FusionCharts {...chartConfigs} />,
document.getElementById('chart-container')
);
OR
var MyApp = React.createClass({
..., // Rest of the React Component Code
render: function () {
return (
<react_fc.FusionCharts {...categoryChartConfigs} />
<react_fc.FusionCharts {...revenueChartConfigs} />
);
}
});
React.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:
React.render(
<react_fc.FusionCharts
type: ...,
renderAt: ...,
className: ...,
dataFormat: ...,
dataSource: ... />,
document.getElementById('chart-container')
);
And your chart should display when you load the page.
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) .
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>
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>
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: ...
};
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 (
<react_fc.FusionCharts {...categoryChartConfigs} />
<react_fc.FusionCharts {...revenueChartConfigs} />
);
}
});
React.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:
React.render(
<react_fc.FusionCharts
type: ...,
renderAt: ...,
className: ...,
dataFormat: ...,
dataSource: ... />,
document.getElementById('chart-container')
);
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.
***/
}
}
};
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:
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 (
<react_fc.FusionCharts {...categoryChartConfigs} />
<react_fc.FusionCharts {...revenueChartConfigs} />
);
}
});
React.render(
<MyApp />,
document.getElementById('chart-container')
);
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 (
<react_fc.FusionCharts {...categoryChartConfigs} />
<react_fc.FusionCharts {...revenueChartConfigs} />
);
}
});
React.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.
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) .
A simple chart with all data provided as props
A 3D pie chart passing the datasource attribute as props
A column, line and area combination chart using the datasource attribute
Fetch data remotely from a JSON file or URL
Fetch data remotely from a XML file or URL
Change the data dynamically and update the chart automatically
Click on a chart to trigger an event, and update the component
Change a parameter and see it automatically update the chart
Click on the one chart and watch the other chart update automatically
Adding graphical elements to make it more informative and visually appealing
A Map having hover effects for entities, markers and marker connectors