In this story, we would be visualizing a data-grid a.k.a data table using react js.

Data Viz Component :
Fusiongrid will help us to visualize interactive grids using react. To know more click
here

Installing the dependencies :
npm install fusiongrid react-fusiongrid — save

Creating the Grid Component

It would comprise of the following logic, preparing the schema & data and invoking the createDataTable method of fusiongrid to create the necessary elements, then finally rendering the ReactFusionGrid component using the required props.

Please refer to the sandbox below for the detailed implementation

Learn more about Fusiongrid from here: https://www.fusioncharts.com/dev/fusiongrid/installation/install-fusiongrid

Github: https://github.com/AyanBhadury/fusiongrid-react

--

--

In this story, we would be visualizing time-series charts from an end-point using react.

<span>Photo by <a href=”https://unsplash.com/@isaacmsmith?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Isaac Smith</a> on <a href=”https://unsplash.com/s/photos/chart?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Photo by Isaac Smith on Unsplash

Data Viz Component :
FusionTime will help us to visualize interactive charts using react. To know more click here

Initialize a react-app using the command below
npx create-react-app <app-name>

Installing the dependencies :
npm install fusioncharts react-fusioncharts — save

Creating the Chart Component

It would comprise of the following logic, maintaining the component state using the useState hook & fetching the data from an endpoint using the useEffect hook.

Please refer to the sandbox below for the detailed implementation

https://codesandbox.io/s/react-hooks-time-series-forked-bx7ci

Learn more about FusionTime from here: https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works

--

--

Ayan Bhadury

Ayan Bhadury

Tech reviewer.. JS developer by heart