Build a Tool for Data Analysis — Data Visualizations

If you are interested in GoodData.CN, please contact us. Alternatively, sign up for a trial version of GoodData Cloud: https://www.gooddata.com/trial/.

In the previous article, I demonstrated how to connect data from a PostgreSQL database to GoodData.CN and I created a very simple data visualization. Also, I built the simple Logical Data Model (LDM) and showed the benefits of Logical Data Models for analytical users.

In this article, I want to dive deeper into data analysis and show how to build a web application that renders data visualizations.

Data Visualizations

Before creating visualizations that can show exciting trends in data, it is good to think of what answers I want to find in the data. Based on the model, I can split my analysis into two views — Short Term one and Long Term one.

Note: I will perform this analysis on the Dashboards tab on http://localhost:3000, where my GoodData.CN is running. Check the section Start PostgreSQL and GoodData.CN locally in the previous article.

Short Term

In the Short Term analysis, I want to know:

• The current numbers of orders.
• Percentages of orders that are in accepted or in_progress statuses.

This analysis can be for daily decisions. For example, if too many orders are in_progress status, it could mean that something is wrong with the processing of orders, and someone should focus on that.

Long Term

In the Long Term analysis, I want to know:

• Months with the best numbers of orders.
• Customers’ characteristics, such as the average age of my customers.

That knowledge can help me with my marketing campaigns and get to know my typical customer.

Visualizations

For demo purposes, I will create just two visualizations. I will start with the Short Term analysis and create a visualization that will tell me how many orders are in accepted and in_progress statuses. Because I do not have any dashboard yet, I need to create one:

I click the Create dashboard button — this will create a brand new dashboard that I will name Short Term Analysis:

Now I need to add insight to the dashboard. You can see the Insight icon in the left panel, which I will drag and drop to the dashboard. This action will open another application — Analytical Designed — where I can create my very first visualization:

Note: I am using the terms Insight and Visualization as interchangeable as they both describe the same thing.

Perfect. Analytical Designer is open, and I can start with data analysis! The first visualization will analyze how many orders from the last seven days are still in the not-sent status (orders are just accepted or in_progress statuses). To do that, I will switch visualization type to the Column chart:

Now, I can add the first item. I will move the Order Id attribute onto the Measures panel, and it will automatically create Count of Order Id. Analytical Designer applied the Count function because the Order Id column represents an attribute, not a numerical fact. The screen should look like this:

Let’s slice the measure by the Date attribute. I will move the Date attribute onto the View By panel, and in the Date as select box, I will choose Created at option:

One more modification in the Date attribute — I will group by Day instead of Year:

The result should be as follows:

You can see that this visualization does not have any valuable information for me. I have to add the Date attribute to the filter bar, and I will do that by clicking the filter icon and choosing the Date option:

The date filter is added, and now I will choose the Last 7 days option:

Now the result is more interesting:

The last thing I need to do is to add the Status attribute onto the Stack By panel:

Perfect! I can now see how many orders are in accepted and in_progress statuses. I will name the visualization Orders Status / Last 7 days and hit the Save button. It will save the visualization and will try to display it on the dashboard, but the dashboard has its date filter, so I will choose the Last 7 days again to filter my visualization properly:

Everything is done, and I can Save & Publish the dashboard. The result is as follows:

For the second visualization, I will analyze which month the IoT online shop had the best orders. Because it is more of a Long Term analysis, I will create a new dashboard and name it Long Term Analysis:

You can see that in the left panel is the visualization that I created previously. I will again move the Insight icon to the dashboard to open Analytical Designer to create another visualization. This time, I will not choose the Column chart visualization but, instead, I will select the Bar chart visualization. The benefit is that a Bar chart sliced by an attribute is sorted by its value, and it is what I want because I can see which month the IoT online shop had the best orders.

I will move Order Id onto the Measure panel and Date attribute onto the View By panel. For the Date attribute, I will keep Date as Solved at (because I am interested only in solved orders) and group it by Month. The result should look like this:

I see that there is a bar that has an (empty value). These orders do not have the Solved at date. I will fix that simply by adding the Status attribute to the filter bar and filtering only the items that have the sent status:

And now I have the perfect result:

I can see which month has the best numbers. Now I will name the visualization Orders / Month and save it. Now I need to edit the dashboard filters. I will select the Last 12 months option, and the result is as follows:

You can see that I can get a lot of information about my orders with two simple visualizations.

Note: It is possible to embed dashboards in any web application. You can find more information about embedding here: Embed Analytics into Your Application.

Embed Data Visualizations to My Custom Application

I inserted data into the PostgreSQL database. I also connected data to GoodData.CN, where I created the Logical Data Model and analyzed my data (Short Term and Long Term analysis).

But what if I want to show visualizations that I created in GoodData.CN in a web application? It is not a problem at all. I can create an application using Accelerator Toolkit that will be ready for use with a minimal additional configuration.

To install everything that is needed to run my application, I will execute the following command in CLI:

$ npx @gooddata/create-gooddata-react-app --backend tiger analytical-client

It will ask me a couple of questions and install everything needed. For the hostname, I use http://localhost:3000, where my GoodData.CN is running, and I will choose TypeScript as the language that I will use to write my application:

After a while, I can jump into the directory where the application is installed. The high-level structure of the generated application is following:

The most important directories are:

• src/components — all visual components.
• src/routes — all routes that I want to edit or remove.

Then there are also directories named scripts and md. The first one holds the script for refresh-md (more info later) and the script for tests. The second holds generated files from the script refresh-md. The Directory contexts contain React Context components, and finally, there are also directory tests for all testcafe tests.

Before I start the application, I have to execute two commands. The first command sets up a token, and the token is the same one printed to the command line after the gooddata service in docker-compose is started. The token is used for API calls:

$ export TIGER_API_TOKEN=YWRtaW46Ym9vdHN0cmFwOmFkbWluMTIz

The second command is more interesting. GoodData UI SDK visual components render data stored in your GoodData.CN workspaces. My application specifies what data to render by referencing the Logical Data Model — do you remember that I created the Logical Data Model when I connected data from the PostgreSQL database to GoodData.CN? If so, you will also not forget that the Logical Data Model is an abstract view of my data in GoodData.CN and I want to use this data in my application. If you do not remember the explanation of the Logical Data Model, I encourage you to read the first article.

To export the Logical Data Model from my workspace, Accelerator Toolkit offers command yarn refresh-md that exports datasets, date datasets, and the id of insights (that I created earlier in this article). The generated code contains exported constants and, using this generated code, I can easily create visualizations, as you will see. The following command does the magic:

$ yarn refresh-md

After executing the refresh-md script, I should see the following screen:

Now, I can start the application using the yarn start command, and on http://localhost:8443, I should see the following screen:

Let’s little bit modify the code. First of all, I will remove the welcome screen in src/routes/AppRouter.tsx, and I will also remove the link to the welcome screen in src/components/Header/Links.tsx. After that, the application should look like this:

And now is the time to add some visualizations. I will open file src/routes/Home.tsx to modify it:

You can see that I am importing Insights — the file and the constants were generated by yarn refresh-md, as I mentioned above. Also, I am just using the InsightView component from GoodData UI SDK, and that’s it. The result is as follows:

I created a simple web application using React.js and GoodData UI SDK that renders data visualizations from GoodData.CN.

Summary

In this article series, I built my analytical solution from scratch over my data. I stored the data in the PostgreSQL database where I needed to import them, but you probably already have your data stored in a database in real-world situations. For analytics, I used GoodData.CN — I connected data from my database and then performed a fundamental analysis. With GoodData.CN, you can do a more in-depth analysis than I did. For example, you can build your metrics using Metric Editor. After I was done with the analysis, I put visualizations into Dashboards and then into my application that I created using Accelerator Toolkit.

Next step

It was all about my journey through building an analytical solution from scratch, even with my web application.

However, you may already have an application where you want to use the GoodData UI SDK or visualizations from GoodData.CN. For this purpose, I encourage you to check the following documentation article: Export Catalog. Using this tool, you can export a list of datasets, date datasets, and id of insights from GoodData.CN workspace into your application and use it as you wish. You do not need to use Accelerator Toolkit, just the GoodData UI SDK libraries/tools you need.

Clean up

And that’s it — the end of the article. If you followed the steps with me and now you want to clean up the stuff that you installed, you can do it with the following step in the command line (ensure that you are in the folder where you have docker-compose.yml):

$ docker-compose down -v --rmi all

Now, everything related to docker should be deleted. You can also delete docker-compose.yml and all the stuff created during this article.