Forum Academy Marketplace Showcase Pricing Features

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

@jvermey Initial tests look promising and I think that I can include it in the coming update! :slight_smile:

ezgif-7-3658ca6cac52

1 Like

Thanks Thimo! That looks great, will the annotation be able to have multiple sections?

@jvermey I am not exactly sure what you mean with multiple sections, do you by any chance have an example? :slight_smile:

Yeah, I was thinking something like this.

You can have unlimited annotations in a chart, so you can create multiple annotations to get this effect. I am not sure if using 1 annotation and dividing it up in sections is supported, but I will look into that.

Update 5.1.0 & 5.1.1

Added annotation support for the Line, Area, Area - multiple lines, Bar, Bar - multiple bars, Scatter, Radar and Candlestick chart! The demo page is updated to see it in action:

Annotation preview

Hi @Thimo, thanks for this amazing plugin !

I’m trying to do something with the Area / Bar charts - multiple lines, but I can’t find how to do it. Here’s a small description of what i’m trying to achieve:

  • My users are creating several projects, in which they will follow a bunch of data over time. So on each projects, the number of data to follow can be different, as the user choose what they want to follow or not. (For example, on one project the user will track it’s purchases of chocolate and butter, and on another project, he will track its flour purchase.)
  • Each project have a “dashboard” page, on which the user can see on a single graph the evolution of the data over time (its purchases in the example).
    So it means that the number of data to track on the Y-Axis will change regarding the project. And when I check on your graph, it seems that I can’t plug a “list of data” on the graph. I have to specify a source for Series 1, Series 2, etc… meaning that it will not be adapted to the number of data to track in the project.

Do you know if there’s a way to achieve that in your graphs ?
I hope I was clear in my description.

Thanks again for the work you’ve done, that’s amazing !
Best,
Thomas

Hi @thomas.guyot , great to hear that you like the plugin!

If you understand correctly you want to dynamically generate series for the multi-line charts. A way to do this could be to use the ‘append data series’ workflow action when the chart is loaded. You will have to make sure that the chart at least has one data series to begin with and you can append the other series via workflows. I have made a demo for you here:

DEMO: https://pluginpreview.bubbleapps.io/version-test/test1
EDITOR: https://bubble.io/page?type=page&name=test1&id=pluginpreview&tab=tabs-1

Hopefully this will help you.

Hi @Thimo,

Thanks for this plugin, truly a lifesaver.

Not sure why, but the grouping suddenly is off. it’s not skipping empty groups even though I disabled "do not skip empty groups’. and the chart cuts off at every empty group, check it out below.

image
image

Hi @amna,

This is normal behaviour when you have null/undefined values in your data series. These values are sometimes present in groupings. Make sure to disable ‘do not skip empty groups’ in all your data series (including the category series). If these null/undefined values are still visible than it is likely that there are empty/missing values in your data.

Hi @Thimo !

Thanks for the quick reactivity and for your demo !

It’s almost that :slight_smile:
The problem in my case is that the number of data to append to the graph will vary in function of the project. (For project 1, there’s 2 “product sales” data to display, for project 2 there’s 4, etc…).
Do you know how can I run a similar workflow with a variable number of data to append ?

Thanks again for the quick answer !
Best,
Thomas

@thomas.guyot You can have a couple of ‘append data series’ workflows after each other and conditionally turn them on/off depending on the amount of data series. So, depending on the data, you can only append 2 instead of 5 data series for example. Would that work?

Hi @Thimo,

Quick and dirty solution, but it works :wink:
After all there’s no point to display more than 5-6 data series on a graph like this !

Super plugin, super reactivity, thanks a lot !
Thomas

1 Like

Update 5.2.0

Every chart now has a workflow action to create the PNG url of that chart. When this workflow is run, the PNG URL is created. When this URL is ready the ‘PNG URL Is Created’ event will be triggered. The PNG URL is accessible as an element state: Chart A’s PNG URL.

This will be great for users to share a picture of a chart, include it in emails, PDFs etc.

The demo page is updated to see it in action:
ezgif-4-220ccbef06e5

1 Like

Update 5.3.0

1 - Added the option to disable the color change on hover.
2 - Multiple minor improvements.

I just bought the plugin but I saw that it doesn’t have the prefix “R$” which is the currency here in Brazil. Is it possible to add?

Captura de Tela 2020-11-28 às 02.44.42

Hi @mequelussi, I will add it for you so it will be available when the new update launches! I will also see if I can change it to an input field so you are not limited to a fixed set of options :slight_smile:

Update 5.4.0

Changed the prefix and suffix dropdowns with input fields! @mequelussi

1 Like

It worked, thank you.

How do I change the font and make the percentage value bolder?

Captura de Tela 2020-11-28 às 22.46.10

@mequelussi You can change the font using the standard font picker inside the property settings:

2020-11-29 om 12.11.29