Introduction to React Query Builder

Initializing the query builder

Fields and operators

Getting started

Translations

Other customizations

Built-in input types

Custom value editors

Configuration

Formatting the query

Server setup, part 1

Server setup, part 2

Fetching data

Displaying data in the grid

Displaying data in a chart

Integrating with an API

Adding a new API endpoint

Preparing a new data set

Displaying the new data

Displaying a map

Geographic data

Setting up the bulk editor

Enhancing the bulk editor

Finalizing the bulk editor

Bulk edits

react

react-querybuilder

node-sass

postgresql

typescript

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: Displaying data in a chart
description: Configuring a chart to display summary information about the data
privateVideoUrl: https://fullstack.wistia.com/medias/l5x0ezu7qp
---

# 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=33 startLine=33 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#L33 }
  const [chartData, setChartData] = useState<any[]>([]);
```

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

```typescript { actualFilename=./protected/src/App.tsx endLine=54 startLine=53 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#L53 }
      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=110 startLine=84 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#L84 }
      <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.

```typescript { actualFilename=./protected/src/App.tsx endLine=5 startLine=5 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#L5 }
import { parseISO } from "date-fns";
```

Configuring a chart to display summary information about the data

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Building Advanced Admin Reporting in React

Welcome: Introduction

Introduction:

Start Here

Module 0: Getting started

Introduction: (1:18)

Introduction to React Query Builder

Lesson 1: (11:12)

Initializing the query builder

Lesson 2: (4:13)

Fields and operators

Module 1: Configuration

Lesson 1: (7:20)

Translations

Lesson 2: (6:58)

Other customizations

Lesson 3: (4:35)

Built-in input types

Lesson 4: (11:19)

Custom value editors

Module 2: Integrating with an API

Lesson 1: (5:24)

Formatting the query

Lesson 2: (12:38)

Server setup, part 1

Lesson 3: (16:28)

Server setup, part 2

Lesson 4: (6:10)

Fetching data

Lesson 5: (11:37)

Displaying data in the grid

Lesson 6: (7:05)

Displaying data in a chart

Module 3: Geographic data

Lesson 1: (2:28)

Adding a new API endpoint

Lesson 2: (7:33)

Preparing a new data set

Lesson 3: (9:22)

Displaying the new data

Lesson 4: (11:23)

Displaying a map

Module 4: Bulk edits

Lesson 1: (12:15)

Setting up the bulk editor

Lesson 2: (7:54)

Enhancing the bulk editor

Lesson 3: (10:01)

Finalizing the bulk editor

Displaying data in a chart