> ## Documentation Index
> Fetch the complete documentation index at: https://forest-chore-open-api.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Create Charts with AWS Redshift

This example shows you how to create a graph based on AWS Redshift.&#x20;

This could be useful if you want to avoid making graphs directly from your production database.

<Info>
  This tutorial is based on [this database sample](https://docs.aws.amazon.com/redshift/latest/gsg/rs-gsg-create-sample-db.html).
</Info>

We'll create 2 charts:

1. Number of users (*single value chart*)
2. Top 5 buyers (*leaderboard chart*)

## Connect to a Redshift Database

Install the [NodeJS package](https://www.npmjs.com/package/node-redshift) for your Forest project

```bash theme={null}
node install node-redshift --save
```

Create the database client and set up the credentials variables cf. package documentation: [https://www.npmjs.com/package/node-redshift](https://www.npmjs.com/package/node-redshift).

```javascript theme={null}
var Redshift = require('node-redshift');

var clientCredentials = {
  host: process.env.REDSHIFT_HOST,
  port: process.env.REDSHIFT_PORT,
  database: process.env.REDSHIFT_DATABASE,
  user: process.env.REDSHIFT_DB_USER,
  password: process.env.REDSHIFT_DB_PASSWORD,
};

const redshiftClient = new Redshift(clientCredentials);
```

<Warning>
  Configure your database credentials in your env variables
</Warning>

## Create the Single Value Chart

Step 1 - Create a Single Value Smart Chart in the Forest Project Dashboard.

[Learn more about Smart Chart](/legacy/javascript-agents/reference-guide/charts/create-a-smart-chart)

<img src="https://mintcdn.com/forest-chore-open-api/l9oWVTFSA2iV8NAX/images/legacy/javascript-agents/image%20(492).png?fit=max&auto=format&n=l9oWVTFSA2iV8NAX&q=85&s=78c91bb18356a208928593539d19f0f5" alt="" width="1094" height="1216" data-path="images/legacy/javascript-agents/image (492).png" />

Step 2 - Create the route to handle the Smart Chart

```javascript theme={null}
const express = require('express');
const router = express.Router();
const Liana = require('forest-express');

...

router.post('/stats/nb-users', Liana.ensureAuthenticated, async (request, response) => {

  const query = `
    SELECT count(*) as nb
    FROM users
  `;

  const data = await redshiftClient.query(query);

  let json = new Liana.StatSerializer({
    value: data.rows[0].nb
  }).perform();

  response.send(json);

});
```

## Create the Leaderboard Chart

Step 1 - Create a Leaderboard Smart Chart in the Forest Project Dashboard.

Learn more about [Smart charts](/legacy/javascript-agents/reference-guide/charts/create-a-smart-chart)

<img src="https://mintcdn.com/forest-chore-open-api/l9oWVTFSA2iV8NAX/images/legacy/javascript-agents/image%20(543).png?fit=max&auto=format&n=l9oWVTFSA2iV8NAX&q=85&s=93bfa3301d0e2af31d6f5b61758d8417" alt="" width="1100" height="1196" data-path="images/legacy/javascript-agents/image (543).png" />

Step 2 - Create the route to handle the Smart Chart

```javascript theme={null}
const express = require('express');
const router = express.Router();
const Liana = require('forest-express');

...

router.post('/stats/top-5-buyers', Liana.ensureAuthenticated, async (request, response) => {

  const query = `
    SELECT firstname || ' ' || lastname AS key, total_quantity AS value
    FROM   (SELECT buyerid, sum(qtysold) total_quantity
            FROM  sales
            GROUP BY buyerid
            ORDER BY total_quantity desc limit 5) Q, users
    WHERE Q.buyerid = userid
    ORDER BY Q.total_quantity desc
  `;

  const data = await redshiftClient.query(query);

  let leaderboard = data.rows;
  let json = new Liana.StatSerializer({
    value: leaderboard
  }).perform();

  response.send(json);

});
```

## Result

<img src="https://mintcdn.com/forest-chore-open-api/l9oWVTFSA2iV8NAX/images/legacy/javascript-agents/image%20(544).png?fit=max&auto=format&n=l9oWVTFSA2iV8NAX&q=85&s=d085144c299eed61be8e344e6c31cc10" alt="" width="1004" height="416" data-path="images/legacy/javascript-agents/image (544).png" />
