Data Visualization with Bubble

One of the common "buzz" terms in the digital world these days is "data visualization". What exactly does that mean? The standard definition is "the graphical representation of data and information". Basically, data visualization is an extension of the old saying "a picture is worth a thousand words". We tend to be visual learners and to see trends and patterns much more easily when the data is presented visually in charts and graphs.

So how do you, as a no-code developer, handle data visualization on your favorite platform? Bubble's chart and graph elements offer a good example of how to present data visually in a no-code app. There are all kinds of charts and graphs that can be used to display data including: bar charts, area charts, stacked bar graphs, line graphs, scatter diagrams, pie charts, and Gantt charts and Bubble has "plug-ins" to let you make use of almost all of these. 

As an example of how to use Bubble's "Chart Element" plug-in, here's an excerpt from one of my books that involved a "To-Do" app where tasks could be assigned to different users:

• One of the changes we want to make to the To-Do app is to add a new page with both a list view of the current tasks and a chart view. To get started, click on the “Plugins” tab, search for Bubble's “Chart Element” plugin and install it, then add a new page and name it "chart-view".

• Drag a repeating group onto the page and position it on the left half of the page, then add a chart element and position it on the right half of the page.

• Double-click the repeating group to open its property editor and set it to 4 rows of data. Then Build the expression “Search for Todos:grouped by”  in the “Data source” field. 

• At this point a “Group By” box will display. Click “+ Add a new grouping”, set “Field 1 to group by” to “Assigned To” and click on “+ Add a new aggregation”. Set the “Aggregation 1” function to “Sum” and set the “Field to calculate on” to “Assigned To”. Now the property inspector for the repeating group should look like this:

• Next, double-click the chart element to display its property editor and set its “Chart type” to “Bar”. The rest of the setup for the chart element is almost the same as for the repeating group. The property editor for the chart element looks like this:

 

• Note: The “Group By” function is an important one when you're building different views of the data in the database. As stated in the Bubble documentation, this function “Groups the list into chunks of related entries, and computes summaries of each group.”. In this case, we grouped the Todo's by user and calculated the sum of the hours to-date for each user.

Once these two elements are set up, the chart-view page looks like this in preview:

 

The listing on the left and the chart view on the right both tell you how the tasks are divided among the three users, but the chart view is definitely quicker and easier to absorb at a glance. That's the advantage of "data visualization" in your app - and this example shows how easily you can include this type of view in your application.