The world’s leading publication for data science, AI, and ML professionals.

Data Visualization in bubble.io

As we know, bubble.io is a great platform for startups and mid-sized companies to develop their website at very low cost, sometime zero.

How to generate user-friendly data visualization without coding?

Photo by Luke Chesser on Unsplash
Photo by Luke Chesser on Unsplash

Bubble.io is a great platform for startups and mid-sized companies to develop their website at very low cost, sometime zero.

It enables non-technical people (yes like me) and those teams on tight time constraint to build websites without self-learning Python Flask from the very beginning. Instead, it allows users to drag and drop elements onto a canvas and define workflows to control the logic.[1]

It is said that Bubble’s vision is to make hand-coding largely obsolete.[2]

During my latest internship, I got the chance to develop a company website using bubble.io starting from scratch with only $120 for purchasing 2 plugins. Amazing, right?

Today, I want to walk you through one of the important part of the website: Data Visualization, and how to do it.


First of all, there’re quite a few data visualization plugins within bubble’s marketplace. But after careful selection, I picked ‘ApexCharts.js’ because its relative wide range of different charts and graphs such as Area chart(Stack chart), Bar chart, Donut chart, Pie chart, Scatter chart, Heatmap and others.You can see more details by clicking this page for demonstration: https://pluginpreview.bubbleapps.io/chart

For integrating this plugin with the pages, there’re a few steps:

  1. Connect with your database via SQL Database Connector(bubble built-in free plugin, hurray!)
  2. Add new queries to generate corresponding series categories(columns) and data(rows)
  3. Select the visualization type, add new visual element on your page and fill the blanks in the ‘Appearance’ section
  4. Enjoy your beautiful visualization 🎉

Next, I will walk you through step by step and use some simple examples.


Step 1: Connect with your database

Click ‘Plugins’ on the toolbar section and pick ‘SQL Database Connector’

Plugin page
Plugin page

If you don’t see this in your ‘Installed Plugins’ list, you need to download it from the plugins market, no extra charge.

Next, choose the Database type and input the Connection string as instructed:

Connect with your database
Connect with your database

Recommend using AWS RDS services, free tier can be enough for quite a while based on your storage. (Another way to save some 💲 !)


Step 2: Add new queries to generate accordingly series categories(columns) and data(rows)

Before doing this, I need to demonstrate my three demo tables.

Relational Schemas
Relational Schemas

As you can see, it’s just for demonstration, your actual relational tables should be way more complex than this.

My first query was selecting Sales_Amount for different department based on its Year/Month. I formatted ‘Year/Month’ here as text(varchar) for demonstration but also because bubble.io only enables ‘date’ format such as ‘2020–01–01’, not the format I want here.

Simple SQL Query
Simple SQL Query

⚠️There’re a few things to take notice here:

  1. The question mark ‘?’ corresponds to the parameter value you’re going to input later on the interface, make sure to set the type correctly;
  2. Always end your query with ‘LIMIT 200’, this is a bubble.io built-in setting in case the query returns too many values;

By clicking ‘Update query types’ button, you will see this interface and make sure to set data type as your desire ⬇️

And next I will display a simple line chart:

when ‘Depart_No’ = 1, Dept_Name = ‘Home’


Step 3: Select the visualization type, add new visual element on your page and fill the blanks in the Appearance section

In order to get customized output, when filling the blanks in the ‘Appearance’ section, you need to select ‘Get data from an external API’ and then select from the list of your SQL connection queries.

And now this is the magic wand part by setting up your returned values(columns and rows):

Remember, usually series category is required to be ‘text’ entries, while series data being ‘number’. You can also choose the decimal amount by inputting number.

Voila! Now you get this beautiful line chart with interaction.

Simple Line Chart for Sales_Amount when 'Dept_No' = 1
Simple Line Chart for Sales_Amount when ‘Dept_No’ = 1

Before this article gets too lengthy, I just want to demonstrate a few other possibilities of visualization such as multiple bar chart and stack graph.

Bar chart vs Stack chart
Bar chart vs Stack chart

As for the second query, I chose to display the proportion of departments among all the orders.

And I suggest using Donut chart or pie chart to display such data.

Donut vs Pie
Donut vs Pie

There’re still so many things you can do in this plugin such as changing the color, size, font and etc… I think this plugin is a decent choice to enable data visualization under the bubble.io infrastructure instead of paying a good amount of money for purchasing license from Tableau or PowerBI. (but if you have a fat budget💰 , that would be another story…)

Anyway, I will come back with more sharing about how to utilize bubble.io to its maximum.😝

Thank you!


Related Articles