Introduction to React Query Builder and prerequisites for the course

Introduction to React Query Builder

Setting up the application and adding a query builder

How to Create a React App With React Query Builder Using npm

Enhancing the query builder with fields from the sample sales data set

Add Fields and Operators to React Query Builder

Getting started

Adding another bit of customization to the query builder -- a Spanish translation

How to Build a Multilingual React Site with Query Builder

Changing or removing certain components of the query builder

Customize or Replace Default Component in React Query Builder

Using the various input types provided with React Query Builder, including numeric inputs and drop-down lists

How to Configure Built-in Input Types in React Query Builder

How to provide your own value editor in order to take full control of the rule manager

How to Customize the React Query Builder ValueEditor Component

Configuration

Preparing for the server setup by processing the output of the query builder into database-ready SQL

Create SQL Queries With React formatQuery and valueProcessor

Beginning the process of setting up a server to host the API

Push a React Query Builder API Server to Heroku With Git

Connecting to a database and finalizing the API

Add a PostgreSQL Database to React Query Builder

How to Fetch Data From a React API

How to Build a Data Table in React With AG Grid

Configuring a chart to display summary information about the data

How to Visualize React API Data in a Graph With AG Charts

Integrating with an API

Setting up a new API endpoint to serve geographic data (UN/LOCODE ports)

How to Build a New React API Endpoint

Configuring the query builder with geographic data fields

How to Add a New API and Variables to React Query Builder

Configuring the grid to show the geographic data

How to Fetch and Display Data With React Query Builder

Using the Google Maps API to display the geographic data on a map

How to Add a Google Maps Object to a React Site

Geographic data

Using React Query Builder for a completely different purpose

How to Bulk Edit Data With React Query Builder

Changing the update mechanism to cover more use cases

How to Add Features to the React onClickUpdate Feature

Polishing off the bulk editor with a custom value editor

How to Build Custom ValueEditor Components in React

Bulk edits

In this course we teach you how to create admin reports with React using a query builder. Admin reporting is a broad topic, and getting started can be overwhelming.

In five modules, we cover configuration of the query builder, setting up a server, displaying data in a grid, chart, and map, as well as some more advanced uses of the query builder. It's about three hours long and comes with code samples.

The course is taught by Jake Boone, who uses React Query Builder in real, mission-critical applications for a large engineering and construction firm.

In this course, we'll be using React Query Builder to create admin reports with complex filtering, bulk editing, data grids, charts, and maps.

Building Advanced Admin Reporting in React

Now we'll add a chart to the page to display the data as a line graph. We'll use the free 

 library. First install the dependencies.

npm i ag-charts-community ag-charts-react

After installing the dependencies, add a state variable to hold the chart data coming from the API.

  const [chartData, setChartData] = useState<any[]>([]);

Store the data in the variable when the API is successful.

      setRawData(res.data);
      setChartData(res.chartData);

---
title: How to Visualize React API Data in a Graph With AG Charts
description: Configuring a chart to display summary information about the data
privateVideoUrl: https://fullstack.wistia.com/medias/l5x0ezu7qp
code: https://gitlab.com/fullstackio/books/newline-course-apps/jake-boone-building-advanced-admin-reporting-in-react/-/tree/main/code/module_03/lesson_03.06
---

# Displaying data in a chart

Now we'll add a chart to the page to display the data as a line graph. We'll use the free [AG Charts](https://www.ag-grid.com/javascript-charts-overview/) library. First install the dependencies.

```shell
npm i ag-charts-community ag-charts-react
```

After installing the dependencies, add a state variable to hold the chart data coming from the API.

```typescript { actualFilename=./protected/src/App.tsx endLine=31 startLine=31 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_03/lesson_03.06/protected/src/App.tsx#L31 }
  const [chartData, setChartData] = useState<any[]>([]);
```

Store the data in the variable when the API is successful.

```typescript { actualFilename=./protected/src/App.tsx endLine=52 startLine=51 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_03/lesson_03.06/protected/src/App.tsx#L51 }
      setRawData(res.data);
      setChartData(res.chartData);
```

Now we can add our chart component at the bottom of the `return` statement.

```typescript { actualFilename=./protected/src/App.tsx endLine=1 startLine=1 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_03/lesson_03.06/protected/src/App.tsx }
import { AgChartsReact } from "ag-charts-react";
```

```typescript { actualFilename=./protected/src/App.tsx endLine=108 startLine=82 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_03/lesson_03.06/protected/src/App.tsx#L82 }
      <AgChartsReact
        options={{
          data: processChartData(chartData),
          series: [
            {
              type: "line",
              xKey: "order_month",
              yKey: "revenue",
            },
            {
              type: "line",
              xKey: "order_month",
              yKey: "profit",
            },
          ],
          axes: [
            {
              type: "time",
              position: "bottom",
            },
            {
              type: "number",
              position: "left",
            },
          ],
        }}
      />
```

Note that the `processChartData` function merely converts the `order_month` value from a string to a proper JavaScript `Date` object.

Jake Boone

Now we'll add a chart to the page to display the data as a line graph.

So back in our terminal in the client directory,

add a state variable to hold the chart data coming from the API.

So just underneath the raw data state variable,

we're going to make a similar one called chart data

Again, we're not going to type this properly.

We'll just call it any array and initialize it to an empty array.

So down here where we're setting the raw data to res.data,

we can now set chart data to res.chartdata

And now we can add our chart component at the bottom of the return statement.

Okay, now at the bottom of the return statement,

just below our grid, or the div wrapping the grid.

We're going to have an AG charts react component.

which equals an object with several properties,

Now the data for our chart needs to be processed a little bit

because we have strings for the date fields right now,

and we need them to be proper JavaScript date objects.

So I'm going to use a function that I haven't created yet

So we'll have two series, two line graphs,

and change the Y key to profit for our other series.

Position bottoms, so this is going to be our X axis.

And our Y axis is going to have type number

Then we need to close out our component there.

And now we need to define our process chart data function.

So the const process chart data is going to equal

we're going to return an object that spreads those properties

with parse ISO from datefans CD dot order month.

We'll save that and build and view the application

And hopefully we've got a line graph at the bottom of our page

Let's see if we can get some data in there.

We'll use our same query as we used before.

So we get all the data, get data, and there we go.