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

[00:00 - 00:07] Now we'll add a chart to the page to display the data as a line graph. We'll use the free AG chart library.

[00:08 - 00:21] First, install the dependencies. So back in our terminal in the client directory, we're going to npm-i-AG charts, community, and AG charts react.

[00:22 - 00:46] After installing the dependencies, 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 and a setter called setchartdata.

[00:47 - 00:54] And that's going to use state. Again, we're not going to type this properly.

[00:55 - 01:08] We'll just call it any array and initialize it to an empty array. Store the data in the variable when the API is successful.

[01:09 - 01:26] So down here where we're setting the raw data to res.data, we can now set chart data to res.chartdata and save that. Let's check our terminal.

[01:27 - 01:32] Looks like that installed correctly. So back to Visual Studio Code.

[01:33 - 01:46] And now we can add our chart component at the bottom of the return statement. First, let's import AG charts react.

[01:47 - 02:11] Let's 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.

[02:12 - 02:36] It's going to have an options prop which equals an object with several properties, one being data. 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.

[02:37 - 02:53] So I'm going to use a function that I haven't created yet called process chart data chart data. And we'll define that in just a second.

[02:54 - 03:01] Now we'll define our series. And that's going to be an array.

[03:02 - 03:16] So we'll have two series, two line graphs, based on order month. So the first one is type line.

[03:17 - 03:31] And the X key is order month. The Y key is going to be revenue.

[03:32 - 03:53] Now we can just duplicate this and change the Y key to profit for our other series. Okay, so that's our series.

[03:54 - 04:09] Now we need to find our axes. That's an array with an object of type time.

[04:10 - 04:37] Position bottoms, so this is going to be our X axis. And our Y axis is going to have type number and position left.

[04:38 - 04:45] Then we need to close out our component there. We can save it.

[04:46 - 05:14] And now we need to define our process chart data function. So the const process chart data is going to equal a function that takes chart data in.

[05:15 - 05:26] And that's an any array. And it's going to return chart data.map.

[05:27 - 05:57] And for every CD object, we're going to return an object that spreads those properties and replaces the order month with parse ISO from datefans CD dot order month. And that should do it.

[05:58 - 06:13] We'll save that and build and view the application to see the line graph we've configured. It's npm run build in the client folder.

[06:14 - 06:20] This takes 10 or 15 seconds to build. So just wait on that.

[06:21 - 06:40] And hopefully we've got a line graph at the bottom of our page once this is built. Okay, that's done.

[06:41 - 06:46] Let's go to our application refresh. Yep, there's the chart at the bottom.

[06:47 - 06:53] Let's see if we can get some data in there. We'll use our same query as we used before.

[06:54 - 06:59] We'll write these greater than zero. So we get all the data, get data, and there we go.

[07:00 - 07:04] There's our line graph.