Back
Using Google Charts for React Data Visualization
Let's explore React Google Charts! We'll discuss its uses and how to use it to create dynamic charts for our applications in this step-by-step tutorial.
To truly understand data, try using charts and other types of data visualization instead of raw numbers. In web apps, charts are particularly useful for creating dashboards that visualize site activities. In this tutorial, we'll learn how to use Google Charts to visualize React data. React Google Charts is a thin, typed React wrapper with a free charting service and one of Google’s JavaScript libraries.
Google Charts is a free, easy-to-use interactive web service that developers use to visualize data. Google Charts has a ton of customization options, ranging from simple line graphs to more complex map trees. To create a chart, the user inputs data and the service returns the requested chart images.
Why Google Charts?
The Google Charts library is highly customizable and easy to use, making it an excellent choice for React developers. Unlike other libraries, it’s also compatible with all platforms, ranging from mobile to desktop. It uses HTML and SVG at its core, and therefore doesn’t depend on any additional library or plugin.
Setting Up a Project
We’ll start by setting up our React project. First, run the command below in your terminal:
Once the command above finishes downloading the required libraries for the React app, navigate to the project directory using the command below:
Installing React Google Charts
Install the react-google-chart
plugin using the command below:
Building Components
To begin, let’s build our first components. First, create a file called Chart.jsx
in the src/
folder:
Paste the code below:
With the code block above, we imported the Chart
components from the react-google-charts
previously installed plugin. The Chart
component contains props that enable graphical representation. For example, the chartType
prop gives us the ability to change the chart display type, the data
prop accepts our input data, and the options
prop accepts a map of options that contains the title
, color
, backgroundcolor
, etc.
Updating App.js
Let’s clean up our App.js
by replacing it with the code block below:
The code block above simply imports and renders our Charts
components.
To see what we’ve built so far, run the code on your browser using the command below:
Here, we have a Google chart showing the various test scores of five students.
Populating Google Charts with React Hooks
Before diving into working with React Hooks, let’s first get a grip on what hooks are.
React Hooks are state managers introduced in React 16.8. They allow us to use features like useState()
and more without having to write a class.
We’ll be simulating responses from an external source or API, and then using React Hooks to manage the states and keep track of the data.
Working with JSON
First, create a data.json
file in the src/ folder:
Next, paste the JSON code below into the newly created file:
The code above is in JSON format and will serve as our API response.
Creating States
We’ll be managing two states: the loading state (when the data is coming from the API) and the data state (when displaying the data in our chart). Paste the code block below into the App.js
file:
In the code block above, we imported the useState
and useEffect
components from the React library and then created two states: one for our loading gif, and the other to display the response data with useState
.
Manipulating our State
Now, let’s manage our state by updating the code in the App()
function with the code block below:
With the code block above, we import the data.json
as a response that is passed into a timer function. This creates a 3-second delay to simulate a fetch request, after which we set our loading to false (stop the spinner) and set the data to the response data.
Using Multiple Charts
React Google Charts has a variety of chart types at our disposal.
In this section, we’ll be implementing a few of the charts to visualize our data from the data.json
file.
When loading, we want to display a loading gif. Import the loading gif into the App.js
file:
import spinner from "./spinner.gif";
Now, let's populate our app with other chart types. Update the return block by copying and pasting the code block below:
We’re looping through the response stored in the data
hook and passing it to our Charts
components as props while listening to the loading state. While the data is loading, the loading gif is displayed, and after 3 seconds, the data is displayed.
Updating the Google Charts Component
In the previous section, we successfully mapped and passed our response as props into the Charts component. Let’s update our Charts component to receive the props and render the charts. To achieve this, update the code in src/Charts.jsx
:
In the code block above, we destructure data
, options
, and chartType
from the response prop, and then assign their corresponding property to the Chart
component.
We’ve successfully built our chart application! Let’s refresh it to see the charts as shown below:
Use Cases for Data Visualization
Keeping track of user data and activities can be rigorous for users, admins, and developers since data is often presented in several rows and columns. This makes reading and interpreting data a strenuous task for the analyst. With visual data, anyone can easily understand it, thus making it easy for the brain to capture and process.
Visual charts are most often used in:
Admin dashboards
Network mapping
Real-time data flow in stock markets
Conclusion
In this tutorial, we explored React Google Charts, its uses, and how to use it to create dynamic charts for our applications. We also broadened our expertise by looking at other techniques for building complicated applications with React Hooks and the react-google-charts
package.
Read the React Google Chart documentation for more implementation information and check out the complete source code for this article.