Forum Academy Marketplace Showcase Pricing Features

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

Hi

I’m subscribed to this plugin and trying to generate a PNG image. I have created a button and added to its workflow the “generate PNG URL” action. I have created a text field to show the created url so I can then view it.

The image shown is just blank.

//s3.amazonaws.com/appforest_uf/f1673285600193x875048613347950700/Chart_export.png

Any ideas what could be going wrong?

Also can I create an image of the chart and save this to the DB?

Hi @artie717

You can save the image to the DB by just simply using the workflow event ‘PNG URL is created’ and saving the PNG URL to your database.

You can see the demo page for more context:

Let me know if you are still having issues after looking at the demo page (:

thanks for the quick response.

I think I’m doing it correctly as I’ve created a chart and thats loading fine on the page… see here for the details in the screenshots



screenshot 1 is the webpage with the chart loaded. it includes the button to create the PNG and a text box populated with the PNG url
screenshot 2 is the loaded png url - its blank??? why?
screenshot 3 is the workflow for the button shown in screenshot 1 that generates the png url

It also looks like a correct setup to me. I will send you a PM so we can take a better look at this issue :slight_smile:

Update 6.67.0

You can now specify a different color for the negative values for a waterfall chart! Check out the demo page to see it in action:

1 Like

Hey @Thimo I’m wondering if you have any plans to add logarithmic scale for scatter/bubble chart axes?

thanks a ton!

Hi @aestela I will add this feature to my feature list to explore of I can include it in a future update :slight_smile:

1 Like

Update 6.70.0

Added the ability to specify a list of colors for the Polar Area, Pie and Donut chart:

Awesome work as always! Will it be possible to click on a bar and a popup would appear referencing the record linked to the bar? Thanks :slight_smile:

I’ve got a use case I’m trying to validate to see if this plugin can work for me. I’m creating sql queries using openAI. That query executes and you end up with a table. I want the user to click a button that then generates a graph based on the table that was just generated (I could have it come from an api source; I can’t think of a better way as I don’t think using bubble.io database would work for this). Another way to ask this is can I let a user modify a graphs source, and that source not be from a bubble.io database?

I think I’m doing something pretty similar to what you are describing:

This table (also from @Thimo !) gets it data from sql query:
https://app.tracktradecrypto.com/all-collections

Clicking on a row opens a new page, which has an apex chart populated also by a sql query:
https://app.tracktradecrypto.com/collection/sewerpass

Changing the source would be as easy as defining the appropriate SQL connections in bubble and letting the user pick

1 Like

Yes this is possible. This is a demo for the area chart, but it works the same for a bar chart: Chartpreview | Bubble Editor

The chart source can be what ever you want (Bubble db, a custom state, API call etc) as long as you can provide a list of numbers (Y-axis) and a list of texts (X-axis) that are the same length :slight_smile:

@drfalken Shared a very cool demo you could take a look at (:

1 Like

Thanks :slight_smile:

@Thimo Hey man, I am getting this error: Uncaught TypeError: Cannot read properties of undefined (reading ‘node’). Charts don’t work

Hi @feb0! Thank you for reporting. I will send you a PM so we can take a closer look at the issue you are having! :slight_smile:

Loving this plugin so far, thank you :pray:

I do have one issue that I can’t seem to find an answer to. Is there a way to edit the scale of y axis in multi area chart? example if i have a range of numbers, let’s say 150 - 200, for y-axis values, the auto scale of y-axis looks good. However, if the range is small, lets say between 120 and 121.5, the scale is misleading as the chart zooms in on the y axis and the difference between 120 and 121.5 looks to be enormous. Any advice on how to alter the scale of y-axis? Thank you

apexcharts 1

apexcharts 2

You can set a custom min and max value for the y-axis using these fields:

That way you can control how the y-axis is displayed :slight_smile:

1 Like

thanks! I don’t know how I missed that :man_facepalming:

another question for you: how can I convert a list of dates to list of texts to be used as series category for x axis in multiple area chart? and is there a way to include more information in the tooltip floating group or just data from a single field for the each item in the series?