Forum Academy Marketplace Showcase Pricing Features

[New plugin] Beautiful Customizable Charts and Graphs (ApexCharts.js)

Hi @romain.lessard

This is a complicated data formatting question. Applying calculations on a list (and creating a new list with those values) is not yet a native Bubble feature as it requires you to loop over the list and save the values to a new list (for example a custom state).

There is a plugin I have used in the past to do list calculations, but there may be others for you to use. This is pretty complex though. Hopefully this points you in the right direction! :slightly_smiling_face:

3 Likes

@thimo, Love the plugin!

Though, when I was trying to use geographic data in the heatmap chart, only the “data type” field presents itself. Is that intentional? I think this is causing the issue I’m seeing, where the heatmap doesn’t render on page load.

image

Hi @jwtuckr !

You should make sure that you use a data type that has fields to use for the X-axis and Y-axis (screenshot from demo page):

The ‘geographic address’ data type doesn’t have field for the X-axis and Y-axis that is why those field don’t show and as a result the chart is not getting displayed. You can take a look at the editor of the demo page to see how the data is structured: Chartpreview | Bubble Editor :slight_smile:

Update 6.14.0

Added support for a reverse Y-axis:


@andyestridge

Don’t forget to refresh your editor after upgrading.

1 Like

bravo! thanks :smiley:

Ah, that makes sense! Is there a chart type you recommend to easily take in a list of geographic addresses (countries), but also counts the instances of each country?

example list:

  • USA
  • USA
  • USA
  • Germany
  • Germany
  • Germany
  • Germany
  • Germany
  • Japan
  • Japan
  • Japan
  • Japan

Thank you Thimo!
I’ll keep digging in that direction

@jwtuckr

You may want to look into a grouping to group your data by the geographical data. There are multiple charts on the demo page that use groupings, like the bar chart:

Appreciate it, Thimo. But unfortunately, Bubble doesn’t allow grouping by the Geographic Address type - :frowning:

In your example, the “Orders” data type only has the “cities” field as a “geographic address”. The country field is text

image

@jwtuckr Ah I wasn’t aware of that. Could a solution, like saving the name of the country as a text to the database, be helpful for your integration? You could for example extract the country name from the location and save it to a different database field when that location is saved to the database so you can use it for your charts :slightly_smiling_face:

Hi @ahenriksan ,

This is actually somewhat complex. Because you will need two different data searches, this will be difficult to create a chart with this data. You will need the same amount of data points for each search, which will not work when for example you have a different amount of grades that are ‘present’ or ‘missing’.

I have replicated your data structure to try it myself. I have used a (bucket) grouping to keep the number of datapoints the same. The thing you will have to do is specify the grades inside this grouping as a minimum and maximum value (I think that the number of grades is a fixed amount so that will not matter that much). I have created a demo to showcase this:

Sidenote, in a horizontal chart the axis are reversed. I will look into if I can add X-axis pre and suffixed to the chart so you can specify the grades better :slight_smile:

@Thimo
Thank you so much. It works! However, my use case may not be the best match for this chart. These data points will never match exactly, I will have different amount of data for each grade for sure.

Is there a way to get something like this with ApexCharts?

@JamesGreg I have updated the demo to create the chart from your image. Does this help?