We truly hope that our free tool comes in handy for your business, especially these days. Follow our news, stay safe & pivot on!

How to use webdarocks.fusioncharts.getData() with react


I am using React with ESB – React-Pivot App
This index.html code

You need to enable JavaScript to run this app.

This is index.js code

import React from “react”;
import ReactDOM from “react-dom”;
import “./index.css”;
import App from “./App”;

ReactDOM.render(<App />, document.getElementById(“root”));

This is App.js Code

export class App extends React.PureComponent {
render() {
return (
reportFilters: [{ uniqueName: “Color” }],
rows: [{ uniqueName: “Country” }],
columns: [{ uniqueName: “Category” }, { uniqueName: “Measures” }],
measures: [{ uniqueName: “Price” }],
global={{ localization: lenguaje }}
reportcomplete={function () {

export default App;

For now, part of code the same App.js file is:

function createCharts() {

function createDoughnutChart() {

I got an error in this line …


TypeError: Cannot read property ‘getData’ of undefined


  319 | function createDoughnutChart() {
320 | //webdatarocks.fusionchart.getData(
321 | //wdrFC.fusionchart.getData(
> 322 | webdatarocks.fusionchart.getData(
323 | {
324 | type: "doughnut2d",
325 | slice: {

Could you help me how can I reference the object of the class.
I know this code works when the pure JS is used with var = new webdatarocks(….

Thanks is advance



3 answers

Hugo Martinez June 16, 2020

Hi, Marco,
To access the WebDataRocks Fusioncharts connector’s methods, the connector needs to be included in your project.
For example, in index.html: 

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.fusioncharts.js"></script>

Also, here is a React with WebDataRocks and FusionCharts example that might be of help: https://codepen.io/webdatarocks/pen/vYYREVM
Hope this helps.

Marco Garcia July 5, 2020

Thanks Hugo
But, I am using the table-pivot app generated by means of react (you have published it in github)
I am not using src in index.html. Instead of this I am using the import sentence in app.js file. Something like this:

import React from “react”;
import ReactDOM from “react-dom”;
//import NavBar from “./components/navbar”;
//import lenguaje from “./es.json”;
import * as WebDataRocksReact from “./webdatarocks.react”;
import ReactFC from “react-fusioncharts”;
import webdatarocks from “webdatarocks”;

import wdrFC from “webdatarocks/webdatarocks.fusioncharts”;
//import wdrGC from “webdatarocks/webdatarocks.googlecharts”;
//import wdrHC from “webdatarocks/webdatarocks.highcharts”;
//import wdrAC from “webdatarocks/webdatarocks.amcharts”;

//import FusionCharts from “fusioncharts”;
//import Column2D from “fusioncharts/fusioncharts.charts”;
//import FusionTheme from “fusioncharts/themes/fusioncharts.theme.fusion”;

But when I use in this way, I have the problem mentioned before.

function createCharts() {

function createDoughnutChart() {

The question is how I must reference the getData function in this context.?
Thanks in advance.

WebDataRocks Team WebDataRocks July 14, 2020

Hello Marco,
Thank you for writing.
Please check our updated GitHub sample: https://github.com/WebDataRocks/pivot-react/blob/master/ES6/src/App.js. It describes the way you can refer to Webdatarocks instance.
To enable Fusionchart support please add an additional import:

import "webdatarocks/webdatarocks.fusionchart";

WebDataTocks Team

Please login or Register to Submit Answer