Now that you have created the Boarding List Chart, let’s embed it in your application.
-
On your dashboard, mouse over the chart until you see the ellipses. Select the ellipses and select “Embed Chart”:
-
Select the “Authenticated” section, then set “Enabled authenticated access” to “ON”, then select “Add” to set up an Authentication Provider.
- Enter a name for the authentication integration, such as “O-FISH Charts for Web”
- Select “Realm” as the Provider.
- Select your Realm Project (our example is WildAid)
- Select your Realm app - this is the same as your Realm App ID (e.g. wildaid-xxxxx)
- Set the “Fetch data using Realm app” toggle to “ON”
- Set the Realm Service Name to “mongodb-atlas”
-
Your settings should look something like this - if all looks good, select “Save Provider”:
-
When you have a green verification section, select “Back to Embed Chart”:
-
Set the User Specified Filters to “date” and select “Save”:
-
Copy the Charts Base URL:
-
Paste the URL into your web application’s src/config.js file (where the realmAppId is set):
-
Go back to the Web UI and copy the Chart ID:
-
In the Charts UI, select “Close” to close the “Embed Chart” window.
- Paste the Chart ID into your web application’s src/config.js file under “patrol-hours”.