How to use the Chart JS - Charts and Graphs plugin

Sometimes you want to use a paid plugin to quickly and easily build nice looking things.

Feb 28, 2023

Bubble is a great general purpose visual programming environment, and you get a lot out of the box. Sometimes though you’ll want to get some additional functionality without having to built it yourself, and here is where plugins come in. This is a great feature of Bubble… Extensibility.

Sometimes you want a plugin because of speed, i.e it’s faster to just use functionality someone else has built. Sometimes the reason is you want advanced features that you just aren’t sure how to build.

This article is a divergence from my usual content, as I’ve been sponsored by the creators of the paid plugin ‘Chart JS - Charts and Graphs’ to write this tutorial about how to use their plugin in a Bubble app. Rest assured, this will be an honest assessment of the product as I work my way through implementing it.. you’ll always get the truth from me.

I’ve not used this plugin before now, so it will be assessed from the perspective of a new user. I’ll walk you through how I’m assessing this as I discover how it works, and show you how I get it working with my own bubble app at FindNoCode.info.

OK, let’s get into it.

First Impressions

When I consider using a plugin, my first step is to go to the plugin docs page and have a look at the reviews.

Scrolling through here https://bubble.io/plugin/chart-js---charts-and-graphs-1553183744528x903111989944909800 , there seem to be a large number of 4 and 5 star reviews, so this is a good sign. Many of the comments are recent, and several talk about the high quality of the support. So far so good..

Note: some plugins by other authors may suffer from lack of support and maintenance, so look out for that risk when reviewing plugins. Using a plugin is taking on a dependency from your app to their code.

The Docs

Next step.. does it have good docs. Yep. There are bunch of links on the main docs page including a full demo app [https://techblocksco.bubbleapps.io/chartsdemo] , a list of 24 chart types, video explanations, Q & A section. I followed some links and found that the creator of this particular plugin is TechBlocks, and they have released some other plugins here: https://www.techblocksco.com/

The 24 chart types are

Plugin Installation

Click Add plugins at the top right

Search for Chart JS - Charts and Graphs

then click Subscribe [and follow their process about monthly or one off payments].

Note: alternatively, you can browse to the plugin page itself then select the application you want it installed into:

https://bubble.io/plugin/simple-charts-1553183744528x903111989944909800

Once you’ve installed the plugin, these chart types are selectable from the Elements tree in the editor.

Note: there is a shorter list of types in the element tree than the 24 types list, as within each element there can be multiple types available in the Chart Type dropdown

The Data

I need a source of data to graph so I can try this out. Since building FindNoCode.info, I’ve added many different metrics, which I store locally in my app. Things such as:

user signs up
user clicks a link, i.e per user [ stored on the user record]
a resource is clicked, i.e per resource [ in a separate metrics datatype]
A search is made - i.e what are people searching for [ stored in a searches datatype]

For the purposes of this test, I’ll graph which resources are clicked over time, giving an indication of the usefulness of the site.

I had previously implemented a graph using in-build Bubble functionality which looks like this

So let’s see how we can make some improvements using the plugin.

Which Graph type?

So many to choose from, which is great. Lets start with a simple line graph and go from there. This video has a great overview https://techblocksco.bubbleapps.io/line-charts. I recommend giving it a watch. It was recored by the great Lachlan Kirkwood

Note: where did I get that video link from? easy, it is listed on their docs site here: https://techblocksco.bubbleapps.io/chartsdemo?tab=3

How

Because we installed the plugin, we get access to new menu items in the element tree, which we can drag to the canvas like usual. I’ve set up a new page for this called charts and just dragged in the Chart - Bar/Line item

Data Source

Pop the query for your data in to the X axis values input box of the plugin.

In my case, the name of the particular metric I want from my Metrics datatype is LinkClicked

I group them based on Month

The Values

Series 1 is what I’ll populate for this example. Replace the default value with your query for the data.

I’m just choosing an arbitrary start time here:

The Result

So far so good. I now have Monthly ‘buckets’ of link click data, aggregated so we see the total activity per month.

Styling

Now let’s take advantage of the extra functionality within this plugin to make it pop.

Using Lachlans description from the video [at 9:43] we can add a custom tooltip by adding a group, and referencing it by its Custom Tooltip HTML ID

Now have have the tooltip which looks better, and dynamically updates based on where your mouse is hovering

Data labels on:

Font size improvement

Line Width

How about if we change to bar type

or stacked area type

Note: Marty, why the declining linksclicked metric?.. Summer holidays in New Zealand, taking time off, lack of marketing etc etc. Back on the wagon soon :)

Summary of Graph 1

Seems easy enough, and I like that once I’ve configured an element, I can select a different sub type [ i.e from line to bar to area] and have a new graph type easily with the same search.

Graph 2

Let’s create another graph to display a different set of data. How about how many links have been clicked, by each of the top 10 active users. Perhaps a pie chart would be good for that.

Looking here https://techblocksco.bubbleapps.io/chartsdemo?tab=3 I see there is a Pie chart type, and I can follow the link to the demo here https://techblocksco.bubbleapps.io/pie-charts to check it out, and from there I can follow the link to the editor https://bubble.io/page?type=page&name=pie-charts&version=live&id=techblocksco&tab=tabs-1 . This is a very appealing aspect of how this plugin is set up, in that you can follow your nose to a successful outcome without being overwhelmed by having to read through tons of text documentation to get started.

Right, I’ve dragged the Chart - Pie/Donut element on to the canvas

let’s configure it.

Configuration

I currently record a counter of link clicks against each user record, so I should be able to do a search for that, sorted by count, then select the top 10.

In the interests of security I’m not listing actual customer names here, but rather a label for each, so I popped these static values into the label box:

For the values, I do a search for users, up to the first 10, and then get each ones CounterLinksClicked value

The default settings is only 4 colours, so if you have more than that many data points, the remaining pie slices are just grey. I’d rather have colours for each, so you can add them here:

Note: I grabbed these colours from my favourite colour site: https://coolors.co/.

Note: yes us Kiwis spell it like colour and grey. :)

I’ve chosen to show the data labels and names

and specified that I want this text displayed after the number:

The result:

Looks good. You also get the option to click items in the key, to toggle if they are included or not

Overall I’ve found this process easier than I expected. Initially there are a lot of settings which can seem a bit daunting, but it’s good to have all those options available. As usual for any project, just start with the basics, and add additional tweaks as you go. Any confusion is well supported by these resources:

The in-plugin documentation dropdowns for many fields are available and completed, which isn’t the case for many plugins
The demo editor for each chart type i.e https://techblocksco.bubbleapps.io/pie-charts
The documentation site i.e https://techblocksco.bubbleapps.io/chartsdemo?tab=3
The tutorial videos
The plugin page docs https://bubble.io/plugin/simple-charts-1553183744528x903111989944909800
The support thread https://forum.bubble.io/t/plugin-update-2021-techblocks-charts-and-graphs-chart-js/145997

Wrap up

OK folks, I’ve walked through two use cases for this plugin, without having used it before and found it pretty quick and easy to set up. I’ve only scratched the surface of this set of charts too, as there are 24 types available. Charting multiple data series seems just as straightforward due to the multiple series input boxes in the plugin UI.

Many charts offer interactivity options which I’ve not explored yet, so let me know if you want more articles about this topic.

Although this is a sponsored post, I’m committed to telling the truth about tech that I work with, and I can say I’m happy with this one…it delivers some professional looking results with a manageable about of effort.

The charts I’ve built are available here if you want to test them out https://findnocode.info/charts

Thanks for reading, see you soon.

..Marty

Bubble Builder