Frontend Integration Series: Vanilla JS

As this is the last article of the series, I thought it would be appropriate to have a look at JavaScript. Although integrating GoodData into frameworks is easier than in pure JavaScript, you can easily create your own custom visualizations by utilizing the GoodData UI SDK. Let’s dive in and go over the four-step process:

• Installing Dependencies
• Setting up Environment Variables
• Setting up the Code Base
• Managing CORS

Note: For those interested in a deeper dive into these integrations, I recommend checking out Patrik Braborec’s quick overview.

At the end of this tutorial, you will be able to integrate GoodData Visualizations into your JavaScript application. For the purposes of this demo, let’s assume that you have a fruit store like this:

This is the last part of an ongoing series about different front-end frameworks and their integration into GoodData, the latest one was about React.

Step 1: Install Dependencies

First things first, you would need to add catalog-export to your dependencies.

npm install @gooddata/catalog-export - save-dev

catalog-export helps you fetch data from GoodData through the GoodData.UI SDK. Details about this are not in the scope of this article, but if you would like to learn more about it, here is the GoodData.UI architecture overview and an article about the Export Catalog.

And just for completeness here are backend dependencies:

npm install @gooddata/api-client-tiger @gooddata/sdk-backend-tiger

Now that is out of the way, let’s look at the code!

Step 2: Set environment variables

Make sure you have your .env and .env.local files with correct values. After you clone the repository, you will see a .env.local.template file in the /clients/vanilla folder.

Note that we are using webpack to bundle the application, so we will be using its conventions when accessing the environment variables from the application code in the code samples.

For .env, you will need to define three variables:

# GoodData host
GD_HOSTNAME=""

# GoodData workspace id
GD_WORKSPACE=""

# GoodData API token
GD_API_TOKEN=""

If you open a GoodData dashboard, you can find the HOSTNAME and WORKSPACE_ID in the URL:

https://<HOSTNAME>/dashboards/#/workspace/<WORKSPACE_ID>/dashboard/<DASHBOARD_ID>

For more information on API tokens, check the Create an API token documentation.

In case you would like to use this in your production, we highly recommend to use OAuth, as you could potentially leak your API_TOKEN.

Step 3: Set up the Code

Before you start, you will need to get data from the server through the catalog-export. For further information, refer to the Export Catalog documentation.

Now we will need to set up a backend in the form of to fetch the data from:

const backend = tigerFactory({
    hostname: process.env.GD_HOSTNAME,
  }).withAuthentication(
    new TigerTokenAuthProvider(process.env.GD_API_KEY)
);

To make things easier, I have created a getDataFromGoodData() function:

async function getDataFromGoodData(measuresAndAttributes, dimensions) {
  let data;
  try {
    const backend = tigerFactory({
      hostname: process.env.GD_HOSTNAME,
    }).withAuthentication(
      new TigerTokenAuthProvider(process.env.GD_API_KEY)
    );
    const result = await backend
    .workspace(process.env.GD_WORKSPACE)
    .execution()
    .forItems(measuresAndAttributes)
    .withDimensions(dimensions)
    .execute();
    data = await result.readAll();
    console.log(data)
  } catch (err) {
      console.log(err);
  }
  return data;
}

OK! Now that we have our data, we still need to visualize them. For this I chose Chart.js. It is very easy to use and can be easily customized.

Here is the code to render the chart:

(async function () {
  const ctx = document.getElementById("chart");
  const { data, headerItems } = await getDataFromGoodData(
      [md.Rating.Avg, md.ProductCategory],
      newDimension([md.ProductCategory, MeasureGroupIdentifier,])
  );
  const labels = headerItems[0][0].map((item) => item.attributeHeaderItem.name);

  new Chart(ctx, {
    type: "bar",
    data: {
      labels,
      datasets: [
        {
          label: "Avg Ratings",
          data,
          borderWidth: 1,
        },
      ],
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
})();

Notice that we are using md.Rating.Avg and md.ProductCategory. These are from the catalog-export and through them we can easily fetch the data. In this example it fetches average rating for each product Category:

Now you can simply create <canvas id=”chart”> and it will render the Visualization!

Here is a very simple template:

<h1>Custom Visualization with GoodData!</h1>
<div>
  <canvas id="chart"></canvas>
</div>

Here is a GitHub repo you can easily start with!

Step 4: Manage CORS

And that is all for code! Quite simple, isn’t it? ;)

Now the only thing that would be missing is to take care of CORS. This is quite simple in GoodData:

1. Navigate to your GoodData Instance,
2. Go to the settings
3. Add allowed origins to the CORS.

Note: For detailed information about CORS, refer to the official documentation.

For my local development, this was http://localhost:3333:

CORS settings. Note, that there are other localhosts from previous articles.

Now just simply build the website with webpack and open it with something like httpster and you should see something like this:

In case the colors of the visualization don’t fit you, remember that the Chart.js is customizable.

Want to Learn more?

If you want to try GoodData, check out our free trial — it works well with the GitHub repo! If you would like to discuss embedding, AI, dashboard plugins or whatever you have on your mind, reach out to us on our community Slack.