Business Dashboards in Bubble.io - A No-Code How-To Guide
Introduction
Data visualisation is an essential aspect of modern business intelligence, enabling smart businesses to:
- Represent complex data in an accessible and meaningful way
- Identify patterns, trends, and insights
- Make informed decisions, faster
- See the impact of decisions
- Increasingly, use predictive technologies to understand the impact of change
Bubble is a no-code platform that allows you to create web applications without needing to understand or write traditional code. While it isn’t as simple as plug and play, it does offer powerful features for data visualisation, making it an ideal choice for anyone looking to create data-driven apps.
In this blog post, we will explore some of the different types of data visualisations available in Bubble, how to create them, and tips for designing effective visualisations.
Examples of Data Visualisation in Bubble
Bubble offers a range of different data visualisation options, including charts, tables, maps, and more. Charts are one of the most commonly used visualisation types, but even a humble table can be transformed into an interactive visualisation that helps to tell a story through the data.
Here’s a few samples of the data visualisation work we’ve done at Knkt.
Planning and Groundwork
Creating data visualisation dashboards in Bubble is a fairly straightforward process if you already know the basics of Bubble. However, like most projects, the hardest part is the planning. Therefore, take your time to do the groundwork, data preparation, and other foundational work before starting the build.
We recommend the following steps:
- Identify the key metrics that need to be displayed, so you’re clear on why they’re important and how they impact the business
- Define the purpose and objective of the visualisations
- Choose the appropriate chart types and formats
- Determine the data sources, how often they’ve updated and how to integrate them into Bubble
- Sketch out the basic layout and design of the visualisations
- Build a prototype in Excel or Google Sheets, and have stakeholders sign it off
Set up Bubble’s Data Structure
Once you’ve figure out what data you want to display, you'll need to set up your data structure in Bubble. In Bubble terminology, this means you configure the data types and fields in it’s inbuilt database. As an example, if we were building a financial dashboard, we could start with the following simple data structure:
- Department - pet food, pet toys, pet health
- Sales - $ amount
- COGS - $ amount
- Profit - $ amount
- Staff - number
Any data we bring in to Bubble would need to match those fields. For an introduction to data structures in Bubble, check out this guide.
For large scale apps, we use and recommend Xano, a no-code backend. Xano stores the data and complex logic, which is then referenced in Bubble.
Best Practices for a Fast Bubble User Experience
- Use the backend as much as possible to process and format the data
- Set up the data structure so the front end only has to display pre-calculated results
- Ideally, use a single search query on each page, with no workflows
Connect and Import your Data
There’s a few options here, and the approach will be determined by where the data is stored and the frequency that you need to import it. Bubble’s backend workflows are used to trigger data feeds or functions to ingest your data. From basic to advanced, options include:
- Building a file import feature, allowing users to import CSV files
- Use AI to parse data from images and PDF’s, and save the data to Bubble
- Use an API to connect to another business systems, including
- Financial platforms like Xero or MYOB
- Stock management and warehousing platforms
- Other SaaS products and cloud services
- Connect to an external data source, using the SQL Database Connector
- Bubble can connect to Postgres, MySQL, and Microsoft SQL as a data source.
- Using the SQL Database Connector Plugin, create a connection to your database
- Once successfully connected, you can run SQL queries within Bubble
- Use your database as the data source for repeating groups, charts, tables and other page elements, referenced using data actions or datasources (referred to as External APIs in Bubble)
- Refer to the Bubble documentation for more details
How to Create Data Visualisations in Bubble
You can use the built-in chart and table elements to create visualisations quickly, or make use of third party plugins. To create a chart or table, you need to select the element from the toolbox, add it to your page, and then configure the data source.
Bubble also offers a range of customisation options, allowing you to adjust the colours, fonts, and other design elements of your visualisations.
Step 1: Create a new page in Bubble and choose the "dashboard" option. From there, you can add and arrange elements like charts, tables, and graphs.
Step 2: Customise these elements to fit your needs. Highlight a particular metric by making it bigger and bolder. Compare data over time with a chart that shows trends.
Step 3: Create dynamic dashboards that update in real-time. Add a live data feed that updates as new information comes in. Let users filter and sort the data themselves with interactive elements.
Step 4: Ensure your data is accurate and up-to-date. Connect your app to your data sources and set up automated workflows that update your data on a regular basis.
Best Practices for Data Visualisation in Bubble
When designing your data visualisations, it's important to keep in mind the overall design of your app or website. You want to make sure that the visualisations fit in with the overall aesthetic and don't clash with other elements on the page. It's also important to keep your audience in mind and design visualisations that are appropriate for their level of understanding and interest. And don't be afraid to experiment with different types of visualisations to find what works best for your data and the story you want to tell.
One of the critical best practices is to choose the right type of visualisation for your data. For example, if you're displaying time-based data, a line chart might be more appropriate than a bar chart. You should also design your visualisations to be easy to read and understand, so use clear labels, colours, and fonts, and avoid clutter.
When designing your visualisations, it's also important to think about the user experience. Consider who your audience is and what they need to know. Use interactive elements to allow users to explore the data and uncover insights for themselves. Finally, remember to test your designs thoroughly to ensure that they are accurate, easy to read, and effective at communicating your message.
Conclusion
Data visualisation is a fundamental aspect of modern business intelligence. Creating a dashboard in Bubble is an excellent way to keep your data organised and easily accessible. With a little creativity and data knowledge, you can develop a dashboard that is both functional and visually appealing.
By following best practices and experimenting with different types of visualisations, you can create data-driven applications that offer valuable insights and information to your users.
Don't hesitate to give it a try!