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

posted on June 12th, 2020

Answered

Marco Garcia asked June 12, 2020

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

Move up