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

Answered

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

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<divid=”root”></div>
<divid=”doughnutchart-container”></div>
</body>

 
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 (
<div>
<WebDataRocksReact.Pivot
toolbar={true}
container={“wdr-component”}
report=”https://cdn.webdatarocks.com/reports/report.json”
slice={{
reportFilters: [{ uniqueName: “Color” }],
rows: [{ uniqueName: “Country” }],
columns: [{ uniqueName: “Category” }, { uniqueName: “Measures” }],
measures: [{ uniqueName: “Price” }],
}}
global={{ localization: lenguaje }}
reportcomplete={function () {
//this.Pivot.off(“reportcomplete”);
createCharts();
}}
/>
</div>
);
}
}

export default App;

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

function createCharts() {
//createFusionChart();
createDoughnutChart();
}

function createDoughnutChart() {
//wdrFC.fusionchart.getData(
webdatarocks.fusionchart.getData(



 
I got an error in this line …

 

TypeError: Cannot read property ‘getData’ of undefined

createDoughnutChart
src/App.js:322

  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() {
//createFusionChart();
createDoughnutChart();
}

function createDoughnutChart() {
//webdatarocks.fusionchart.getData(
//wdrFC.fusionchart.getData(
webdatarocks.fusionchart.getData(
{

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

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";

Regards,
WebDataTocks Team