Blog post

Visualizing Supabase Data using Metabase

2022-06-29

5 minute read

Visualizing Supabase Data using Metabase

Data helps organizations make better decisions. With a programming language like Python to analyze your data and transform data into visual representations, you can effortlessly tell the story of your business. One way to create customized visuals from your data would be to use data visualization libraries in Python like Matplotlib, Seaborn, Ggplot2, Plotly, or Pandas. When you want to accomplish this task with little or no code (not even SQL), you might consider using tools like Metabase.

With Metabase, a powerful visualization tool, you can quickly turn your data into easy-to-understand visuals like graphs, pie charts, flow diagrams, and much more. Then, using Metabase’s intuitive interface, you can cut through the data noise and focus on what’s essential for your business.

In the previous blog of this series, we explained how to use Python to load data into Supabase. In this blog, we will create different kinds of charts out of the data stored in Supabase using Metabase.

Prerequisites

Before we dive in, let’s look at some prerequisites that you will need:

  • Supabase project with data

Based on our previous article, we assume we already have a Supabase project setup and have data loaded into it.

  • Metabase Docker Container

To take advantage of the open-source version of Metabase, you can use the Metabase docker container here.

Visualizing data in Supabase with Metabase

Launching Metabase

To launch Metabase, simply go to http://localhost:3000/setup/ which is the default port that the Metabase server will be listening to.

After Metabase is launched, select your preferred language and add your contact information. In the Add your data markdown, you will need to choose PostgreSQL.

screen shot of adding postgres data to metabase

You will be prompted to add the necessary connection information to your Supabase project. Go to your Supabase project and hit Settings > Database to get the database info.

screen shot of supabase dashboard database connection information

Enter the necessary information on Metabase and hit next. Finally, select your data preference, after which you will land on the Metabase homepage.

View Database and Tables

We can now see the "Supabase DB" Supabase project under "Our data".

screen shot of metabase dashboard

To view the tables, go to SupabaseDB > public

screen shot of metabase dashboard table view

View Table Data Insights

Go back to the home page and select public schema under "Try these x-rays based on your data"

screen shot of metabase dashboard schema view

Here is the output of the product table.

screen shot of metabase data visualization

As you can see, we can get some handy information from this like:

  • How many products are present with a given range of inventory count.
  • How many products are present for a given range of price.
  • The ratio between the number of employees to the number of products.
  • How many products each vendor has created.

If you have column-specific views, you can select the zoom-in option under More x-rays.

screen shot of metabase data visualization

For example, let's select the total employees field.

screen shot of metabase data visualization

With information like this, you will be able to answer some key questions like

  • What are some common statistics for company employees like average, minimum, maximum, and standard deviation?
  • What is the distribution of the employees across different geo locations?
  • What is the distribution of the employees across different vendors?

Using custom SQL queries

We can also use custom queries to set up our dashboards. To do this, go to New > SQL query.

screen shot of metabase custom queries dashboard

Next, under the database, select "SupabaseDB".

screen shot of metabase custom queries dashboard

We will be using the following SQL query:


_10
select "Vendor".vendor_name, product_name, "Vendor".total_employees
_10
from
_10
"Product"
_10
left join "Vendor" on "Product".vendor_id = "Vendor".vendor_id
_10
where "Vendor".total_employees;

This query should fetch us the vendor name and the product where the number of employees for a given vendor is less than 110.

To run the SQL query, hit the play button.

screen shot of metabase data visualization

This will be shown below in the output window. To visualize the data, hit the visualization button.

screen shot of metabase data visualization

Next, select the type of visualizer you want. Let us choose Bar.

screen shot of metabase data visualization

Choose the appropriate x-axis and y-axis fields, and you will be able to view the data in bar format.

screen shot of metabase data visualization

Conclusion

Data visualization empowers organizations to turn unused data into actionable insights, leading to faster and better decision-making. Why wait?

screen shot of a meme saying visualization works every time

With our free plan Supabase account, you can start a new project today and use Metabase to visualize your app data.

If you have any questions please reach out via Twitter or join our Discord.

More Python and Supabase resources

Share this article

Last post

Flutter Tutorial: building a Flutter chat app

30 June 2022

Next post

Partial data dumps using Postgres Row Level Security

28 June 2022

Related articles

Offline-first React Native Apps with Expo, WatermelonDB, and Supabase

Supabase Beta September 2023

Dynamic Table Partitioning in Postgres

Supabase Beta August 2023

pgvector v0.5.0: Faster semantic search with HNSW indexes

Build in a weekend, scale to millions