Forum Academy Marketplace Showcase Pricing Features

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

If I recall correctly, ApexCharts does have support for reversed y-axis. I will take a look in the coming days if I can include it in an update for you! :slightly_smiling_face:

1 Like

Hi @Thimo and thank you for this amazing plugin.

I’m using it for accounting purposes and i’m currently facing a problem trying to display the running balance of an account through an area graph :

I’m using a Repeating Group to calculate in a dynamic way the running balance :

This is how the balance calculation is done :


It’s the sum of each row from the 1st one to the current one, sorted by date.
Now this is working great in a repeating group.

But when i’m trying to display the Balance column on a area graph, i cant find a way to set the correct Series Data’s list of numbers, as this list is not stored in the database. It is not stored and can’t be done as all the values of the list are linked together. Adding, removing or editing a value would have an impact on all the following values as it is by nature a running balance.

This is quite frustrating as the right list of values is printed in the repeating group…

If you have an idea on how to solve this, it would help a lot all financial users as running balance are almost everywhere.

Thank you so much
Romain

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,

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?

@Thimo
Yes, it does. Thank you so much. It works perfectly.

@Thimo can you add “forceNiceScale”? :slight_smile:
specifically to the multiple area chart!

@andyestridge Could you maybe give me an example for when this will come in handy? I played around with it, but I have a hard time seeing when this feature will be needed. If you maybe can give me an example of a use case for this feature that would be great for me to see what the best way is to implement it for you :slight_smile:

yeah for sure!

I have an instance where i am charting numbers rounded to 1, but feel like the y axis would look cleaner rounded to 0. Since i’m letting the chart format on its own, it winds up putting the gridlines and funny places imo. here’s an example:

i think forceNiceScale will make the #s all nice and rounded

anyways, it’s not a huge deal, more of a “i’m being particular” thing :laughing:

Hey @Thimo, can this plugin use CSV or JSON as a data source?