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
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.
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
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
