Back to homepage

Integration with FusionCharts

FusionCharts is a charting library that provides a wide range of interactive charts, maps, and graphs. This tutorial describes how to integrate WebDataRocks with FusionCharts and visualize your data from the component.

Supported chart and map types

Charts:

Maps:

  • maps/worldwithcountries (demo)

In case the chart you need is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of fusioncharts.getData().

Please follow the steps below to integrate your pivot table component with FusionCharts.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration guide. Your code of the component with WebDatarocks should look similar to the following:

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

function App() {
  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
      />
    </div>
  );
}

export default App;

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

function App() {
  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
       report={report}
      />
    </div>
  );
}

The fields you’ve specified in the report will be shown on the chart.

Step 2. Get a reference to the WebDataRocks instance

Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

Get the reference with the useRef hook:

React + ES6

// ...
import { useRef } from "react";

function App() {
  const pivotRef = useRef(null);

  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
    </div>
  );
}

export default App;

React + TypeScript

// ...
import { RefObject, useRef} from "react";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot | null> = useRef<WebDataRocksReact.Pivot>(null);

  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
    </div>
  );
}

export default App;

Now it’s possible to interact with the component through pivotRef.current.webdatarocks.

Step 3. Add FusionCharts

Step 3.1. Download FusionCharts and its wrapper for React:

npm install fusioncharts react-fusioncharts

Step 3.2. Import the wrapper and necessary FusionCharts dependencies into your component:

// Import the FusionCharts component for React
import ReactFC from "react-fusioncharts";
// Import the FusionCharts library
import FusionCharts from "fusioncharts";
// Import the necessary chart type (we’ll import column)
import Column2D from "fusioncharts/fusioncharts.charts";
// Import a FusionCharts theme
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

Step 3.3. Pass the imported dependencies to the FusionCharts React component:

ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

Step 3.4. Create a state variable to store configurations for our future chart (e.g., chartProps):

import { useState, /* Other imports */ } from "react";
// ...

function App() {
  // ...
  const [chartProps, setChartProps] = useState({
    type: "mscolumn2d",
    width: "100%",
    height: 450,
    dataFormat: "json",
    // This property will contain data from WebDataRocks
    dataSource: {},
  });
  // ...
}

export default App;

To learn more about configurations available for FusionCharts, please refer to the FusionCharts documentation.

Step 3.5. Now you can add a chart to your component:

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
    />
    <ReactFC {...chartProps}/>
  </div>
);

If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with FusionCharts yet. We will connect them in the next step.

Step 4. Show the data from the pivot table on the chart

Step 4.1. Import the WebDataRocks Connector for FusionCharts:

import "@webdatarocks/webdatarocks/webdatarocks.fusioncharts.js";

The Connector provides the fusioncharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

Step 4.2. If we call the fusioncharts.getData() method before WebDataRocks is fully loaded, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:

React + ES6

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <ReactFC {...chartProps}/>
  </div>
);

React + TypeScript

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current?.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <ReactFC {...chartProps}/>
  </div>
);

Now the chart will be created only when the data is loaded and the report is ready. 

Step 4.3. Implement the createChart() function. It will use the fusioncharts.getData() method from the Connector:

React + ES6

const createChart = () => {
  pivotRef.current.webdatarocks.fusioncharts.getData(
    {
      type: "mscolumn2d",
    },
    // Function called when data for the chart is ready
    drawColumnChart,
    // Function called on report changes (filtering, sorting, etc.)
    drawColumnChart
  );
};

React + TypeScript

const createChart = () => {  
  pivotRef.current?.webdatarocks.fusioncharts.getData(
    {
      type: "mscolumn2d",
    },
    // Function called when data for the chart is ready
    drawColumnChart,
    // Function called on report changes (filtering, sorting, etc.)
    drawColumnChart
  );
};

Notice the type configuration — it must correspond to the chart type specified in step 3.4 (in our case, it is "mscolumn2d").

If the Connector does not support the desired chart type or you need to preprocess the data differently, implement a function that handles the data processing and pass it to fusioncharts.getData() as the options.prepareDataFunction parameter.

Step 4.4. Finally, create a function to draw the chart:

React + ES6

const drawColumnChart = (chartConfig) => {
  // Applying the chart theme
  chartConfig.chart.theme = "fusion";
  setChartProps({
    // Copying previous chart props to keep them the same
    ...chartProps,
    // Changing only the chart’s dataSource
    dataSource: chartConfig,
  });
};

React + TypeScript

const drawColumnChart = (chartConfig: any) => {
  // Applying the chart theme
  chartConfig.chart.theme = "fusion";
  setChartProps({
    // Copying previous chart props to keep them the same
    ...chartProps,
    // Changing only the chart’s dataSource
    dataSource: chartConfig,
  });
};

As you can see, here we are using the chartProps’ setter setChartProps(). Each time the chartProps’ value is updated, the chart will be re-rendered. As a result, all your changes to the WebDataRocks report will be reflected on the chart.

Step 5. Run the project

Run your project with the following command:

npm run dev

Open http://localhost:5173/ in the browser to see an interactive dashboard with WebDataRocks and FusionCharts. The column chart shows the data from WebDataRocks and reacts instantly to any changes in the report.

Check out the full code

After completing this tutorial, the full code of the component should look as follows:

React + ES6

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import { useState, useRef } from "react";
import "@webdatarocks/webdatarocks/webdatarocks.fusioncharts.js";

import ReactFC from "react-fusioncharts";
import FusionCharts from "fusioncharts";
import Column2D from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

function App() {
  const pivotRef = useRef(null);
  const [chartProps, setChartProps] = useState({
    type: "mscolumn2d",
    width: "100%",
    height: 450,
    dataFormat: "json",
    dataSource: {},
  });

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const onReportComplete = () => {
    pivotRef.current.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {
    pivotRef.current.webdatarocks.fusioncharts.getData(
      {
        type: "mscolumn2d",
      },
      drawColumnChart,
      drawColumnChart
    );
  };

  const drawColumnChart = (chartConfig) => {
    chartConfig.chart.theme = "fusion";
    setChartProps({
      ...chartProps,
      dataSource: chartConfig,
    });
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
        ref={pivotRef}
        toolbar={true}
        report={report}
        reportcomplete={onReportComplete}
      />
      <ReactFC {...chartProps} />
    </div>
  );
}

export default App;

React + TypeScript

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import { useState, RefObject, useRef} from "react";
import "@webdatarocks/webdatarocks/webdatarocks.fusioncharts.js";

import ReactFC from "react-fusioncharts";
import FusionCharts from "fusioncharts";
import Column2D from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme);

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot> = useRef<WebDataRocksReact.Pivot>(null);
  const [chartProps, setChartProps] = useState({
    type: "mscolumn2d",
    width: "100%",
    height: 450,
    dataFormat: "json",
    dataSource: {},
  });

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const onReportComplete = () => { 
    pivotRef.current?.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {  
    pivotRef.current?.webdatarocks.fusioncharts.getData(
      {
        type: "mscolumn2d",
      },
      drawColumnChart,
      drawColumnChart
    );
  };

  const drawColumnChart = (chartConfig: any) => {
    chartConfig.chart.theme = "fusion";
    setChartProps({
      ...chartProps,
      dataSource: chartConfig,
    });
  };
  
  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <ReactFC {...chartProps}/>
    </div>
  );
}

export default App;

See also

This detailed tutorial will walk you through the integration of WebDataRocks with Highcharts.

Supported chart types

WebDataRocks supports the following chart types of the Highcharts library:

Follow the steps below to start creating interactive data visualizations.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration guide. Your code of the component with WebDatarocks should look similar to the following:

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

function App() {
  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
      />
    </div>
  );
}

export default App;

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

function App() {
  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
       report={report}
      />
    </div>
  );
}

The fields you’ve specified in the report will be shown on the chart.

Step 2. Get a reference to the WebDataRocks instance

Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

Get the reference with the useRef hook:

React + ES6

// ...
import { useRef } from "react";

function App() {
  const pivotRef = useRef(null);

  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
    </div>
  );
}

export default App;

React + TypeScript

// ...
import { RefObject, useRef} from "react";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot | null> = useRef<WebDataRocksReact.Pivot>(null);

  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
    </div>
  );
}

export default App;

Now it’s possible to interact with the component through pivotRef.current.webdatarocks.

Step 3. Add Highcharts

Step 3.1. Download the Highcharts and Highcharts React wrapper npm packages:

npm install highcharts highcharts-react-official

Step 3.2. Import Highcharts and Highcharts React wrapper into your component:

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

Step 3.3. In the .jsx file where your React element is returned, add Highcharts using the HighchartsReact component:

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
    />
    <HighchartsReact
      highcharts={Highcharts}
    />
  </div>
);

Step 3.4. Create a state variable to store options for the chart (e.g., chartOptions) and assign it as the HighchartsReact prop:

import { useState, /* Other imports */ } from "react";
// ...

function App() {
  // ...
  const [chartOptions, setChartOptions] = useState({});
  // ...
  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
      />
    </div>
  );
}

Step 4. Show the data from the pivot table on the chart

Step 4.1. Import the WebDataRocks Connector for Highcharts:

import "@webdatarocks/webdatarocks/webdatarocks.highcharts.js";

The Connector provides the highcharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

Step 4.2. If we call the highcharts.getData() method before WebDataRocks is fully loaded and ready to use, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:

React + ES6

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <HighchartsReact
      highcharts={Highcharts}
      options={chartOptions}
    />
  </div>
);

React + TypeScript

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current?.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <HighchartsReact
      highcharts={Highcharts}
      options={chartOptions}
    />
  </div>
);

Now the chart will be created only when the data is loaded and the report is ready.

Step 4.3. Implement the createChart() function. It will use the highcharts.getData() method from the Connector:

React + ES6

const createChart = () => {  
  pivotRef.current.webdatarocks.highcharts.getData(
    {
      type: "spline",
    },
    // Function called when data for the chart is ready
    (data) =>
      setChartOptions(data),
    // Function called on report changes (filtering, sorting, etc.) 
    (data) =>
      setChartOptions(data),
  );
};

React + TypeScript

const createChart = () => {  
  pivotRef.current?.webdatarocks.highcharts.getData(
    {
      type: "spline",
    },
    // Function called when data for the chart is ready
    (data: any) =>
      setChartOptions(data),
    // Function called on report changes (filtering, sorting, etc.) 
    (data: any) =>
      setChartOptions(data),
  );
};

Step 5. Run the project

Run your project with the following command:

npm run dev

Open http://localhost:5173/ in the browser to see how the pivot table looks in combination with Highcharts.

To see what a real-time interaction is, try experimenting: filter the data, change the measures and the aggregation functions — the results are reflected on the chart at once.

Check out the full code

After completing this tutorial, the full code of the component should look as follows:

React + ES6

import { useState, useRef } from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import "@webdatarocks/webdatarocks/webdatarocks.highcharts.js";

function App() {
  const pivotRef = useRef(null);

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const [chartOptions, setChartOptions] = useState({});

  const onReportComplete = () => {
    pivotRef.current.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {  
    pivotRef.current.webdatarocks.highcharts.getData(
      {
        type: "spline",
      },
      // Function called when data for the chart is ready
      (data) =>
        setChartOptions(data),
      // Function called on report changes (filtering, sorting, etc.) 
      (data) =>
        setChartOptions(data),
    );
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
       ref={pivotRef} 
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
      />
    </div>
  );
}

export default App;

React + TypeScript

import { useState, RefObject, useRef } from "react";
import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import "@webdatarocks/webdatarocks/webdatarocks.highcharts.js";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot> = 
    useRef<WebDataRocksReact.Pivot>(null);

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const [chartOptions, setChartOptions] = useState({});

  const onReportComplete = () => {
    pivotRef.current?.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {  
    pivotRef.current?.webdatarocks.highcharts.getData(
      {
        type: "spline",
      },
      // Function called when data for the chart is ready
      (data: any) =>
        setChartOptions(data),
      // Function called on report changes (filtering, sorting, etc.) 
      (data: any) =>
        setChartOptions(data),
    );
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
       ref={pivotRef} 
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <HighchartsReact
        highcharts={Highcharts}
        options={chartOptions}
      />
    </div>
  );
}

export default App;

See also

Get the sample project to try WebDataRocks.

See the Integrate WebDataRocks tutorial to integrate WebDataRocks into your existing project.

Step 1. Download or clone our sample project from GitHub:

React + ES6

git clone https://github.com/WebDataRocks/pivot-react
cd pivot-react/ES6

React + TypeScript

git clone https://github.com/WebDataRocks/pivot-react
cd pivot-react/typescript

Step 2. Install the npm packages described in the package.json file:

npm install

Step 3. Run your application:

npm start

The application will be available at http://localhost:3000/.

You can shut down the app with Ctrl + C.

See also

Read this tutorial to learn how to integrate the WebDataRocks reporting tool with Google Charts.

Supported chart types

WebDataRocks supports the following chart types:

  1. Area (demo)
  2. Bar (demo)
  3. Column (demo)
  4. Line (demo)
  5. Pie (demo)
  6. Sankey (demo)

If you need a chart that is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of googlecharts.getData().

To start a new React data visualization project with WebDataRocks Pivot Table and Google Charts, follow the steps below.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration guide. Your code of the component with WebDatarocks should look similar to the following:

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

function App() {
  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
      />
    </div>
  );
}

export default App;

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

function App() {
  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  return (
    <div> 
      <WebDataRocksReact.Pivot
       toolbar={true}
       report={report}
      />
    </div>
  );
}

The fields you’ve specified in the report will be shown on the chart.

Step 2. Get a reference to the WebDataRocks instance

Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

Get the reference with the useRef hook:

React + ES6

// ...
import { useRef } from "react";

function App() {
  const pivotRef = useRef(null);

  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
    </div>
  );
}

export default App;

React + TypeScript

// ...
import { RefObject, useRef} from "react";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot | null> = useRef<WebDataRocksReact.Pivot>(null);

  // ...

  return (
    <div> 
      <WebDataRocksReact.Pivot
       ref={pivotRef}
       toolbar={true}
       report={report}
      />
    </div>
  );
}

export default App;

Now it’s possible to interact with the component through pivotRef.current.webdatarocks.

Step 3. Add Google Charts

Step 3.1. Download the Google Charts wrapper for React:

npm install react-google-charts

Step 3.2. Import Google Charts into your component:

import { Chart } from "react-google-charts";

Step 3.3. Now you can add a chart to your component. Let’s create a column chart:

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
    />
    <Chart
     chartType="ColumnChart"
    />
  </div>
);

If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with Google Charts yet. We will connect them in the next step.

Step 4. Show the data from the pivot table on the chart

Step 4.1. Create a state variable to store data for the chart (e.g., chartData):

import { useState, /* Other imports */ } from "react";

function App() {
  // ...
  const [chartData, setChartData] = useState([]);
  // ...
}

The chartData variable is now empty, but soon we’ll fill it with data from our component.

Step 4.2. Import the WebDataRocks Connector for Google Charts:

import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

The Connector provides the googlecharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

Step 4.3. If we call the googlecharts.getData() method before WebDataRocks is fully loaded, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:

React + ES6

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <Chart
     chartType="ColumnChart"
    />
  </div>
);

React + TypeScript

const onReportComplete = () => {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks 
  pivotRef.current?.webdatarocks.off("reportComplete");
  createChart();
};

return (
  <div> 
    <WebDataRocksReact.Pivot
     ref={pivotRef}
     toolbar={true}
     report={report}
     reportcomplete={onReportComplete}
    />
    <Chart
     chartType="ColumnChart"
    />
  </div>
);

Now the chart will be created only when the data is loaded and the report is ready. 

Step 4.4. Implement the createChart() function. It will use the googlecharts.getData() method from the Connector:

React + ES6

const createChart = () => {  
  pivotRef.current.webdatarocks.googlecharts.getData(
    {
      type: "column",
    },
    // Function called when data for the chart is ready
    (chartConfig) => setChartData(chartConfig.data),
    // Function called on report changes (filtering, sorting, etc.) 
    (chartConfig) => setChartData(chartConfig.data),
  );
};

React + TypeScript

const createChart = () => {  
  pivotRef.current?.webdatarocks.googlecharts.getData(
    {
      type: "column",
    },
    // Function called when data for the chart is ready
    (chartConfig: any) => setChartData(chartConfig.data),
    // Function called on report changes (filtering, sorting, etc.) 
    (chartConfig: any) => setChartData(chartConfig.data),
  );
};

Notice the type configuration — it must correspond to the chartType specified in step 3.3 (in our case, the type value is "column").

As you can see, here we are using the chartData’s setter setChartData(). Each time the chartData’s value is updated, the chart will be re-rendered. As a result, all your changes to the WebDataRocks report will be reflected on the chart.

Step 4.5. Finally, pass the data to the chart:

<Chart
 chartType="ColumnChart"
 data={chartData}
/>

Step 5. Run the project

Run your project with the following command:

npm run dev

Open http://localhost:5173/ in the browser to see how the pivot table looks in combination with Google Charts.

Now try experimenting: filter the data, change the measures and the aggregation functions, and see how the results are reflected on the chart.

To learn more about configurations available for Google Charts, please refer to the Google Charts documentation.

Check out the full code

After completing this tutorial, the full code of the component should look as follows:

React + ES6

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import { useRef, useState } from "react";
import { Chart } from "react-google-charts";
import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

function App() {
  const pivotRef = useRef(null);
  const [chartData, setChartData] = useState([]);

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const onReportComplete = () => {
    // Unsubscribing from reportcomplete
    // We need it only to track the initialization of WebDataRocks
    pivotRef.current.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {
    pivotRef.current.webdatarocks.googlecharts.getData(
      {
        type: "column",
      },
      // Function called when data for the chart is ready
      (chartConfig) => setChartData(chartConfig.data),
      // Function called on report changes (filtering, sorting, etc.)
      (chartConfig) => setChartData(chartConfig.data),
    );
  };

  return (
    <div>
      <WebDataRocksReact.Pivot
       ref={pivotRef} 
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <Chart
       chartType="ColumnChart"
       data={chartData}
      />
    </div>
  );
}

export default App;

React + TypeScript

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
import { RefObject, useRef, useState } from "react";
import { Chart } from "react-google-charts";
import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

function App() {
  const pivotRef: RefObject<WebDataRocksReact.Pivot> = useRef<WebDataRocksReact.Pivot>(null);
  const [chartData, setChartData] = useState([]);

  const report = {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  };

  const onReportComplete = () => {
    // Unsubscribing from reportcomplete
    // We need it only to track the initialization of WebDataRocks 
    pivotRef.current?.webdatarocks.off("reportComplete");
    createChart();
  };

  const createChart = () => {  
    pivotRef.current?.webdatarocks.googlecharts.getData(
      {
        type: "column",
      },
      // Function called when data for the chart is ready
      (chartConfig: any) => setChartData(chartConfig.data),
      // Function called on report changes (filtering, sorting, etc.) 
      (chartConfig: any) => setChartData(chartConfig.data),
    );
  };
  
  return (
    <div>
      <WebDataRocksReact.Pivot 
       ref={pivotRef}
       toolbar={true}
       report={report}
       reportcomplete={onReportComplete}
      />
      <Chart
       chartType="ColumnChart"
       data={chartData}
      />
    </div>
  );
}

export default App;

See also

This tutorial shows how to integrate the WebDataRocks reporting tool with the React framework. You can also run our sample project from GitHub.

Prerequisites

Step 1. Create a project (optional)

If you don’t have a React application yet, create one. In this guide, we’re using Vite to create a project:

React + ES6

Commands for npm 7+:

npm create vite@latest my-app -- --template react
cd my-app
npm install

Commands for npm 6:

npm create vite@latest my-app --template react
cd my-app
npm install

React + TypeScript

Commands for npm 7+:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

Commands for npm 6:

npm create vite@latest my-app --template react-ts
cd my-app
npm install

Step 2. Get WebDataRocks

Install the WebDataRocks React wrapper from npm:

npm install @webdatarocks/react-webdatarocks

Step 3. Include WebDataRocks

Step 3.1. Add WebDataRocks styles to the src/index.css file:

@import "@webdatarocks/webdatarocks/webdatarocks.css";

Step 3.2. Import WebDataRocksReact to the src/App.jsx file (src/App.tsx for React + TypeScript):

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";

Step 3.3. In src/App.jsx (src/App.tsx for React + TypeScript), add WebDataRocks using the WebDataRocksReact.Pivot component:

function App() {
  return (
    <div>
      <WebDataRocksReact.Pivot 
         toolbar={true}
      />
    </div>
  );
}

export default App

Step 4. See the result

Run your application:

npm run dev

Open http://localhost:5173/ in the browser — WebDataRocks is embedded into your React project.

You can shut down the app with Ctrl + C.

Important WebDataRocks.Pivot is not compatible with <StrictMode>. If needed, disable <StrictMode> for the parts of the project where WebDataRocks is used.

Integrate WebDataRocks in a React/JSX project

This sample shows how to integrate WebDataRocks Pivot Table with the React/JSX application.

See also

Move up