Skip to content

Commit 64a28f2

Browse files
rohitkrrohitkr
authored
Merge pull request #13 from sghosh9/develop
Update README.md
2 parents 151a0a2 + 50ac007 commit 64a28f2

File tree

1 file changed

+135
-76
lines changed

1 file changed

+135
-76
lines changed

‎README.md‎

Lines changed: 135 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
#### [Demos and Documentation](https://fusioncharts.github.io/react-fusioncharts-component/)
2-
31
# react-fusionCharts
42

53
A simple and lightweight `React` component which provides bindings for `FusionCharts` JavaScript Charting Library. It easily adds rich and interactive charts to any `React` Projects.
@@ -25,107 +23,168 @@ After installing `react-fusioncharts`, import it in your `React` app:
2523
```javascript
2624
import React from 'react';
2725
import ReactDOM from 'react-dom';
28-
import FusionCharts from 'fusioncharts';
29-
import Charts from 'fusioncharts/fusioncharts.charts';
26+
import FusionCharts from 'fusioncharts/core';
27+
import Column2D from 'fusioncharts/viz/column2d';
3028
import ReactFC from 'react-fusioncharts';
29+
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';
3130

32-
Charts(FusionCharts);
31+
ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);
3332

3433
const myDataSource = {
35-
chart: {
36-
caption: 'Harry\'s SuperMart',
37-
subCaption: 'Top 5 stores in last month by revenue',
38-
numberPrefix: '$',
39-
},
40-
data: [
41-
{
42-
label: 'Bakersfield Central',
43-
value: '880000',
44-
},
45-
{
46-
label: 'Garden Groove harbour',
47-
value: '730000',
48-
},
49-
{
50-
label: 'Los Angeles Topanga',
51-
value: '590000',
52-
},
53-
{
54-
label: 'Compton-Rancho Dom',
55-
value: '520000',
56-
},
57-
{
58-
label: 'Daly City Serramonte',
59-
value: '330000',
60-
},
61-
],
34+
"chart": {
35+
"caption": "Countries With Most Oil Reserves [2017-18]",
36+
"subCaption": "In MMbbl = One Million barrels",
37+
"xAxisName": "Country",
38+
"yAxisName": "Reserves (MMbbl)",
39+
"numberSuffix": "K",
40+
"theme": "fusion"
41+
},
42+
"data": [
43+
{
44+
"label": "Venezuela",
45+
"value": "290"
46+
},
47+
{
48+
"label": "Saudi",
49+
"value": "260"
50+
},
51+
{
52+
"label": "Canada",
53+
"value": "180"
54+
},
55+
{
56+
"label": "Iran",
57+
"value": "140"
58+
},
59+
{
60+
"label": "Russia",
61+
"value": "115"
62+
},
63+
{
64+
"label": "UAE",
65+
"value": "100"
66+
},
67+
{
68+
"label": "US",
69+
"value": "30"
70+
},
71+
{
72+
"label": "China",
73+
"value": "30"
74+
}
75+
]
6276
};
6377

6478
const chartConfigs = {
65-
type: 'column2d',
66-
width: 600,
67-
height: 400,
68-
dataFormat: 'json',
69-
dataSource: myDataSource,
79+
type: 'column2d',
80+
width: 600,
81+
height: 400,
82+
dataFormat: 'json',
83+
dataSource: myDataSource,
7084
};
7185

7286
ReactDOM.render(
73-
<ReactFC {...chartConfigs} />,
74-
document.getElementById('root'),
87+
<ReactFC {...chartConfigs} />,
88+
document.getElementById('root'),
7589
);
7690
```
7791

78-
## Using Licensed Version of FusionCharts
79-
80-
While using licensed version of `FusionCharts`, you need to specify library as follows:
92+
## Render FusionMaps
8193

82-
Specify library for all charts:
94+
To render a map, import the FusionMaps module along with the map definition.
8395

8496
```javascript
8597
import React from 'react';
8698
import ReactDOM from 'react-dom';
99+
import FusionCharts from 'fusioncharts/core';
100+
import Maps from 'fusioncharts/maps';
101+
import World from 'fusioncharts/maps/es/fusioncharts.world';
87102
import ReactFC from 'react-fusioncharts';
103+
import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion';
88104

89-
// Here import licensed version of FusionCharts
90-
import FusionCharts from './path/to/fusioncharts';
91-
import Charts from './path/to/fusioncharts/fusioncharts.charts';
92-
93-
// Provide FusionCharts core and other modules to resolve
94-
ReactFC.fcRoot(FusionCharts, Charts)
95-
96-
// Rest of the application code
97-
98-
```
99-
100-
Specify library for a particular chart:
105+
ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);
101106

102-
```javascript
103-
import React from 'react';
104-
import ReactDOM from 'react-dom';
105-
import ReactFC from 'react-fusioncharts';
106-
107-
// Here import licensed version of FusionCharts
108-
import FusionCharts from './path/to/fusioncharts';
109-
import Charts from './path/to/fusioncharts/fusioncharts.charts';
107+
const myDataSource = {
108+
"chart": {
109+
"caption": "Average Annual Population Growth",
110+
"subcaption": " 1955-2015",
111+
"numbersuffix": "%",
112+
"includevalueinlabels": "1",
113+
"labelsepchar": ": ",
114+
"entityFillHoverColor": "#FFF9C4",
115+
"theme": "fusion"
116+
},
117+
"colorrange": {
118+
"minvalue": "0",
119+
"code": "#FFE0B2",
120+
"gradient": "1",
121+
"color": [
122+
{
123+
"minvalue": "0.5",
124+
"maxvalue": "1.0",
125+
"color": "#FFD74D"
126+
},
127+
{
128+
"minvalue": "1.0",
129+
"maxvalue": "2.0",
130+
"color": "#FB8C00"
131+
},
132+
{
133+
"minvalue": "2.0",
134+
"maxvalue": "3.0",
135+
"color": "#E65100"
136+
}
137+
]
138+
},
139+
"data": [
140+
{
141+
"id": "NA",
142+
"value": ".82",
143+
"showLabel": "1"
144+
},
145+
{
146+
"id": "SA",
147+
"value": "2.04",
148+
"showLabel": "1"
149+
},
150+
{
151+
"id": "AS",
152+
"value": "1.78",
153+
"showLabel": "1"
154+
},
155+
{
156+
"id": "EU",
157+
"value": ".40",
158+
"showLabel": "1"
159+
},
160+
{
161+
"id": "AF",
162+
"value": "2.58",
163+
"showLabel": "1"
164+
},
165+
{
166+
"id": "AU",
167+
"value": "1.30",
168+
"showLabel": "1"
169+
}
170+
]
171+
};
110172

111-
// Resolve modules
112-
Charts(FusionCharts)
173+
const chartConfigs = {
174+
type: 'world',
175+
width: 600,
176+
height: 400,
177+
dataFormat: 'json',
178+
dataSource: myDataSource,
179+
};
113180

114181
ReactDOM.render(
115-
<ReactFC
116-
width="600"
117-
height="400"
118-
type="column2d"
119-
dataSource={ /* Chart data source */ }
120-
fcLibrary={FusionCharts} // Provide FusionCharts library
121-
/>,
122-
document.getElementById('root'),
182+
<ReactFC {...chartConfigs} />,
183+
document.getElementById('root'),
123184
);
124-
125-
// Rest of the application code
126-
127185
```
128186

187+
129188
## Test
130189

131190
```sh

0 commit comments

Comments
 (0)