CODEWITHSUNDEEP
javascriptreactjsmeteorfusionchartsmeteor-react
Sundar
Sundar

Reputation: 387

Meteor app crashing on startup with Window not found error on fusioncharts module

Once I added a chart from Fusioncharts as a new dependency and trying to start the app it throws the following error and aborts

ReferenceError: window is not defined from the line node_modules/react-fusioncharts/lib/ReactFC.js:13:21

This entire code us under client/imports/ui/pages so I don't understand why is trying to look for window object and that too at the start of meteor!!

Code snippet. 

import ReactFusioncharts from "react-fusioncharts";

class DashBoard extends Component {
  constructor(props) {
    super(props);

  }

  dataSource= {
      // Chart Configuration
      "chart": {
          "caption": "Countries With Most Oil Reserves [2017-18]",
          "subCaption": "In MMbbl = One Million barrels",
          "xAxisName": "Country",
          "yAxisName": "Reserves (MMbbl)",
          "numberSuffix": "K",
          "theme": "fusion",
        },
        // Chart Data
        "data": [{
            "label": "Venezuela",
            "value": "290"
        }, {
            "label": "Saudi",
            "value": "260"
        }, {
            "label": "Canada",
            "value": "180"
        }, {
            "label": "Iran",
            "value": "140"
        }, {
            "label": "Russia",
            "value": "115"
        }, {
            "label": "UAE",
            "value": "100"
        }, {
            "label": "US",
            "value": "30"
        }, {
            "label": "China",
            "value": "30"
        }]
    };

  render() {
    return(    <ReactFusioncharts
      type="column2d"
      width="700"
      height="500"
      dataFormat="JSON"
      dataSource={this.dataSource}
    />
  )
  }
}



export default DashBoard;

Upvotes: 0

Views: 158

Answers (1)

Zapdos13
Zapdos13

Reputation: 865

In order to render a chart using FusionCharts you need to import the fusioncharts library first then followed by the library file from which chart package you are trying to render then you can import react-fusioncharts plugin here is a code snippet below for your reference 

import React from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const myDataSource = {
  "chart": {
    "caption": "Countries With Most Oil Reserves [2017-18]",
    "subCaption": "In MMbbl = One Million barrels",
    "xAxisName": "Country",
    "yAxisName": "Reserves (MMbbl)",
    "numberSuffix": "K",
    "theme": "fusion"
  },
  "data": [
    {
      "label": "Venezuela",
      "value": "290"
    },
    {
      "label": "Saudi",
      "value": "260"
    },
    {
      "label": "Canada",
      "value": "180"
    },
    {
      "label": "Iran",
      "value": "140"
    },
    {
      "label": "Russia",
      "value": "115"
    },
    {
      "label": "UAE",
      "value": "100"
    },
    {
      "label": "US",
      "value": "30"
    },
    {
      "label": "China",
      "value": "30"
    }
  ]
};

const chartConfigs = {
    type: 'column2d',
    width: 600,
    height: 400,
    dataFormat: 'json',
    dataSource: myDataSource,
};

ReactDOM.render(
    <ReactFC {...chartConfigs} />,
    document.getElementById('root'),
);

Upvotes: 0

Related Questions