Documentation menu
JS React Angular Vue
JS React Angular Vue

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