CODEWITHSUNDEEP
reactjsfusioncharts
Rohit Bajaniya
Rohit Bajaniya

Reputation: 41

Map chart not load in react using fusion chart

I need to integrate map chart using fusion chart library in my react application. after install fusion chart library through yarn configured component including fusion chart library, but when i render the map chart it shows me below error

enter image description here

After having error i just watch the node modules and check the existence of file, but seems like its not there, but my fusion chart installed successfully with no error then how this happened?

Here is my code

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';
import World from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);

class MapChart extends Component {
    state = {
        dataSource: {
            "chart": {
                showCanvasBorder: true,
                canvasBorderColor: "#000000",
                canvasBorderThickness: 1,
                showBorder: true,
                borderColor: "#000000",
                fillColor: "#f1f1f1",
                caption: "* USA traffic not displayed on Heat Map",
                includevalueinlabels: "1",
                showHoverEffect: false,
                showEntityHoverEffect: false,
                theme: "fusion",
            },
            data: [
                {
                    "id": "27",
                    "value": "8",
                    "color" : "#f65122"
                },
                {
                    "id": "159",
                    "value": "3",
                    "color" : "#fcc50b"
                },
                {
                    "id": "142",
                    "value": "3",
                    "color" : "#f65122"
                },
                {
                    "id": "141",
                    "value": "9",
                    "color" : "#f3172d"
                },
                {
                    "id": "173",
                    "value": "9",
                    "color" : "#f3172d"
                },
                {
                    "id": "113",
                    "value": "5",
                    "color" : "#f65122"
                },
                {
                    "id": "193",
                    "value": "5",
                    "color" : "#f65122"
                },
                {
                    "id": "122",
                    "value": "9",
                    "color" : "#f65122"
                }
            ]
        }
    }

    render() {
        return (
            <React.Fragment>
                <div style={{ width: '100%', margin: '20px', textAlign: 'center' }}><button><Link to="/">Back to home</Link></button></div>
                <div style={{ textAlign: 'center' }}>
                    <ReactFC
                        type="worldwithcountries"
                        width="80%"
                        height="500"
                        dataFormat="JSON"
                        dataSource={this.state.dataSource} />
                </div>
            </React.Fragment>);
    }
}

export default MapChart;

Any help on this issue would be greatly appreciated. Thanks!

Upvotes: 2

Views: 1581

Answers (3)

Aman Saraswat
Aman Saraswat

Reputation: 172

Here is the sample code for react map -

import React, { Component } from 'react';
import FusionCharts from 'fusioncharts';
import Maps from 'fusioncharts/fusioncharts.maps';

//download all map from https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip
import WorldWithCountries from 'fusioncharts/maps/fusioncharts.worldwithcountries';
import ReactFCWorldWithCountries  from 'react-fusioncharts';
import ReactFCWorld from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import World from 'fusioncharts/maps/fusioncharts.world';

ReactFCWorldWithCountries.fcRoot(FusionCharts, Maps, WorldWithCountries, FusionTheme);
ReactFCWorld.fcRoot(FusionCharts, Maps, World, FusionTheme);

class MapChart extends Component {
    state = {
        dataSource_world: {
            "chart": {
                canvasBorderColor: "#000000",
                canvasBorderThickness: 1,
                showBorder: true,
                borderColor: "#000000",
                showCanvasBorder: true,
                theme: "fusion",
                caption: "Increased Population History by country Last Year",
                xAxisName: "Population",
                yAxisName: "Growth",
                entityFillHoverColor: "#FFF9C4",
                numberSuffix: "%",
                showBorder: "1",
                bgColor: "#FFFFFF",
                //Tooltip customization
                toolTipBorderColor: "#666666",
                toolTipBgColor: "#efefef",
                toolTipBgAlpha: "80",
                showToolTipShadow: "1",
                //Theme
                plotBorderThickness: "0.25",
                showxaxispercentvalues: "1",
                showValues: "1"
            },
            colorrange: {
                "color": [{
                    "minvalue": "0",
                    "maxvalue": "100",
                    "color": "#FFD74D"
                }, {
                    "minvalue": "0",
                    "maxvalue": "100",
                    "color": "#FB8C00"
                }, {
                    "minvalue": "0",
                    "maxvalue": "100",
                    "color": "#E65100"
                }]
            },
            data: [{
                "id": "NA",
                "value": "20",
                "showLabel": "1"
            }, {
                "id": "SA",
                "value": "30",
                "showLabel": "1"
            }, {
                "id": "AS",
                "value": "48",
                "showLabel": "1"
            }, {
                "id": "EU",
                "value": "20",
                "showLabel": "1"
            }, {
                "id": "AF",
                "value": "2.58",
                "showLabel": "1"
            }, {
                "id": "AU",
                "value": "15",
                "showLabel": "1"
            }]
        },
        dataSource_worldWithCountry: {
            "chart": {
                showCanvasBorder: true,
                canvasBorderColor: "#000000",
                canvasBorderThickness: 1,
                showBorder: true,
                borderColor: "#000000",
                fillColor: "#f1f1f1",
                caption: "* USA traffic not displayed on Heat Map",
                includevalueinlabels: "1",
                showHoverEffect: false,
                showEntityHoverEffect: false,
                theme: "fusion",
            },
            data: [
                {
                    "id": "27",
                    "value": "8",
                    "color" : "#f65122"
                },
                {
                    "id": "159",
                    "value": "3",
                    "color" : "#fcc50b"
                },
                {
                    "id": "142",
                    "value": "3",
                    "color" : "#f65122"
                },
                {
                    "id": "141",
                    "value": "9",
                    "color" : "#f3172d"
                },
                {
                    "id": "173",
                    "value": "9",
                    "color" : "#f3172d"
                },
                {
                    "id": "113",
                    "value": "5",
                    "color" : "#f65122"
                },
                {
                    "id": "193",
                    "value": "5",
                    "color" : "#f65122"
                },
                {
                    "id": "122",
                    "value": "9",
                    "color" : "#f65122"
                }
            ]
        }
    }

    render() {
        return (
            <React.Fragment>
                <h2 style={{textAlign:"center"}}>Map With World Chart</h2>
                <div style={{ textAlign: 'center' }}>
                    <ReactFCWorldWithCountries
                        type="worldwithcountries"
                        width="80%"
                        height="500"
                        dataFormat="JSON"
                        dataSource={this.state.dataSource_worldWithCountry} />
                </div>
                <br />
                <h2 style={{ textAlign: "center" }}>Map World Chart</h2>
                <div style={{ textAlign: 'center' }}>
                    <ReactFCWorld
                        type="world"
                        width="80%"
                        height="500"
                        dataFormat="JSON"
                        dataSource={this.state.dataSource_world} />
                </div>
                <br />
                <br />
            </React.Fragment>);
    }
}

export default MapChart;

Fusion chart library initially not provided any collection of maps. Whenever you install fusion chart library on initial base it has only few maps file in map folder of package. Due to that reason you're file is not available in the whole package. They provided the link on their official page for download all the map related to fusion map chart.

To render these maps, you need to download the map definition files from here and copy-paste the maps folder within your fusion charts directory.

Please follow the steps

  1. open link https://www.fusioncharts.com/download/map-definition-files
  2. click on Download Map Definition Files(https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip) which contains collection of all the maps available in Fusion Maps XTall the maps available in Fusion Maps XT
  3. after download copy the /maps folder from this download package and paste it in your fusion charts folder.
  4. now run you're existing application the file will be found and your react application will work as expected.

Hope this would help you.

Upvotes: 1

ankitkanojia
ankitkanojia

Reputation: 3122

Fusion Maps XT offers interactive maps to plot geographical data like revenue by regions, population by state, survey and election results effectively. You can also drop markers on the map to pinpoint places like office locations and flight routes. It has over 1000 maps including all continents, major countries and all the US states.

Fusion chart library initially not provided any collection of maps. Whenever you install fusion chart library on initial base it has only few maps file in map folder of package. Due to that reason you're file is not available in the whole package. They provided the link on their official page for download all the map related to fusion map chart.

To render these maps, you need to download the map definition files from here and copy-paste the maps folder within your fusion charts directory.


Please follow the steps

  1. open link https://www.fusioncharts.com/download/map-definition-files
  2. click on Download Map Definition Files(https://cdn.fusioncharts.com/downloads/addons/fusionmaps-xt-definition.zip) which contains collection of all the maps available in Fusion Maps XTall the maps available in Fusion Maps XT
  3. after download copy the /maps folder from this download package and paste it in your fusion charts folder.
  4. now run you're existing application the file will be found and your react application will work as expected.


Every information already defined on it official site of fusion chart but not in proper way so with the help of link which earlier defined you'll be directly redirect to that instruction page.

On GitHub i created one repository with map chart using fusionchart library, so you can download that repository and check exact functionality of map chart.

GitHub Repository

Upvotes: 7

Zapdos13
Zapdos13

Reputation: 865

Since you are rendering the world with countries map in your app, you need to import fusioncharts.worldwithcounties.js, however, if you install FusionCharts via npm it does not have worldwithcountries file in the map folder, to get the file you need to install fusionmaps, here is the link - https://www.npmjs.com/package/fusionmaps This will install all the map definition files, then you can use the following command:

import World from 'fusionmaps/maps/fusioncharts.worldwithcountries';

Upvotes: 2

Related Questions