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

Makes sense. For the design of the cache, the user has the option to view the data by day, week or month. Would you suggest making separate caches for each of these options?

Yeah, you could make a cache for all 3. Data loading optimization in Bubble is always a trial and error so I would recommend to just try some stuff out. Having a cache and loading less rows at a time could also help in optimizing the loading speeds :slight_smile:

Very helpful as always @Thimo. I’ll give that a shot.

Hi @Thimo,
I’m trying to plot an Area chart with 4 time series comprising ~4000 datapoints each, but this seems to makes my (Chrome) browser freeze systematically, before the graph could be displayed. Data is fetched from my Bubble database, and there’s no transformation or grouping applied. I’ve tried turning off x-axis labels and ticks, but it doesn’t solve the issue.

I’ve read on a forum that there’s a ‘type’ option for x values in Apex.js that should be set to ‘numeric’ or ‘datetime’ to improve performance, in those cases where the number of datapoints is quite large, but I can’t seem to find an equivalent option in the settings panel…
My “Series category” is a list of numbers originally (corresponding to timepoints) but since a list of texts is expected, I apply a :formatted as text operation.

Thank you for your help!

@emmanuelle.bioud I will send you a PM so we can take a better look at your setup!

Hello!
Is there any way to customize the text shown on hover?

Hi @marlene1! Yes, you could for example use a custom tooltip. You can see an example in the demo page. Make sure the custom tooltip group is visible on the page (you can hide it for example behind the chart) :slight_smile:

Demo: Chartpreview | Bubble Editor

In my bubble app, I have two data types: Brand and Email.

Each email/newsletter is linked with a brand.

I am trying to create a repeating group that shows the number of emails sent by the brand.

In my repeating group table, I want to add a bar chart that shows the graphical representation of emails sent by the brand. Brands with the highest number of emails should have the longest bar and vice versa.

I tried doing a search for email where the brand is equal to the current rows brand and their count but it is now working.

Can somebody please help me with this?

Hi @heyshivamkr You are showing the chart in a relatively small space, so you need to try to hide as much chart properties as possible to make room for the bar. Looking at your setup, you are only showing 1 number on the chart “:count” and you do not have Y-axis data. Having only 1 number will create a single bar, but as that bar is not relative to other bars, the scaling might be off.

Maybe you could try to first increase the size of the chart to make sure that is not an issue. You can also use the debugger to see if your data expression is actually returning the correct data.

Hi!

When I save a png URL through a workflow, there is a URL generated that looks something like this: //5ed268c8b863cc54df47de4cbe0f9c50.cdn.bubble.io/f1716388960202x222871928666106270/chart_export.png

How do I actually access this through the URL? Only getting errors when trying to open.

Best, Marlene

Hi @marlene1!

Are you still having this issue? I have the feeling it was caused by a temporary Bubble bug. When I trigger this action myself, I retrieve a link that opens just fine: https://f7390246d0a47c0eaa8e4d5bdc7cca32.cdn.bubble.io/f1716488981539x299343017086478400/Chart_export.png

Still having the issue. The link I get looks like this: //5ed268c8b863cc54df47de4cbe0f9c50.cdn.bubble.io/f1716554157634x420365557570441000/chart_export.png

If I try to add https:// then I get AccessDenied

Now it was working with https:// but empty graph shown

@marlene1 Great to hear the link works right now! “Access denied” indicates a privacy rule or Bubble issue. As I am using the provided file uploader function from Bubble, it might be a good thing to reach out to Bubble support if this happens again.

Regarding the empty chart, when running the action please make sure the chart is loaded and visible on the page. If you need an example, you can take a look at this chart on the demo page (editor is public):

Hopefully this helps!

Thanks! At least getting it to download now so that’s great.
Can’t see that there are privacy rules issues, but I think there still might be some bugs affecting the graphs overall, because there’s a lot of unusual “behaviour”; legends not showing, download formatting is completely different, and when I hover on a barchart, the chart disappears…

@marlene1 Let me send you a PM! I am not seeing the issues you are describing and of charts disappearing and I don’t have received similar bug reports. Maybe there the issues are caused by custom HTML or other plugins on the page. Let’s take a look at these issues to see if we can find the cause

Hi Thimo,

Any chance of labelled axis?

Where we can label any axis without having to butcher adding in text within bubble?

I ask, because the adding labels manually means using fixed axis and it never lines up looking that well.

Something like this,

image

Hi @mattdaniell91!

I think this is supported by the apexcharts library. This is something I wanted to look into for a bit now. As this will be quite a big chance (I need to add it to all charts with axis) I will look into it this weekend! Are there any chart types you want to use with this feature? If I manage to make it work I can first start with those charts :slight_smile:

Amazing!

Charts my clients use:

  • Bar chart
  • Line Chart
  • Scatter plot

Thanks Thimo!

1 Like

Hi @mattdaniell91!

I just pushed an update (6.137.0) that adds Axis Title option to the Area Chart (Normal and Multiple Series), Bar Chart (Normal and Multiple Series), Line Chart (Normal and Multiple Series), Scatter Chart, Bubble Chart and Mixed Chart! :slight_smile:

I also enabled it for the Line Chart (Multiple Series) on the demo page:

Hope this helps!