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

Ah, gotcha. I was wanting to take a number, multiply it by -1 and use the +(days): operator to calculate dates from x days ago. Looks like a backend workflow is the proper place to do this.

Hi there, I am struggling with a seemingly trivial issue:

I want to display a line graph with 6 data series.

4 of them I can configure right in the chart and they work absolutely fine.

The other 2 I need to add via workflow, but I repeatedly get an error:

The plugin ApexCharts.js - Charts and Graphs / action Append Data Series a Area Chart - multiple lines threw the following error: anonymous@
@https://dhtiece9044ep.cloudfront.net/package/run_debug_js/ac7fc4b37b9c7d91273cfdbad7136692fa259d6c3d1d26b2cf42cf6a2c30d885/xfalse/x15:6:2173923
@https://dhtiece9044ep.cloudfront.net/package/run_debug_js/ac7fc4b37b9c7d91273cfdbad7136692fa259d6c3d1d26b2cf42cf6a2c30d885/xfalse/x15:6:2160410 (please report this to the plugin author)

Any ideas?

P.S. The exactly same happens when using the Multiple Bar chart element. I have now checked and unchecked virtually any option provided. Have tried with different datasets and manually entered data. Always the same, the Append Data series workflow seemingly doesn’t work.

Hi @m.bb

Are you by any chance appending these data series on page load? It can happen that the chart is not yet fully loaded on the page when you are trying to append the data series. The chart has an ‘is loaded’ state for you to see if the chart is ready to accept data series. You can look at the demo below to see how this works:

Hopefully this helps :slight_smile:

Many thanks @Thimo! I believe you are right, it seems to be a problem in this area. I am investigating your idea now.

Hi, @Thimo

I’m using external API for series data. and there is a loading spinner visible when the chart isn’t loaded and invisible when the chart is loaded. (using ’ is loaded? ’ )
I need to let the spinner visible when parameters of API are changed. How can I do this?

Hi @Thimo ,

I am trying to create a cumulative multiple lines chart. I have no idea how to implement this with the plugin. Previously, I use the free bubble chart like this for one line
Screenshot 2021-10-06 at 17.31.20
Currently I have this but it doesn’t aggregate per month and I can’t seem to make it cumulative.
Screenshot 2021-10-06 at 17.36.50


Would you be able to help ?
Thank you!

@adrien908 I will send you a PM! :slight_smile:

The Download PNG button doesn’t seem to be working for me on the Area chart (I’m on the latest version of Chrome). Both the SVG and CSV ones work great. Anyone else experiencing the same?

Also, is it possible to add x-axis suffixes to the Bar chart?

What is the logic under Radial chart?

On your DEMO page you want to display 3 values from your Data table

  • 50
  • 75
  • 70

Radial chart displays

  • 85%
  • 15%
  • 40%

What is the logic? Confusing formula as for me.

@Thimo how to change maximum value in gauge chart? (currently 0 is minimum and 100 is maximum. I need custom).

@vovahumnytskiy The radial chart just displays the numbers from your database on the chart. The demo page had the labels sorted the other way around by accident (apologies) but that is now fixed!

For now, the radial chart only accepts percentages (values between 0 - 100). You can do a calculation to get a value like this in Bubble, or you can use the ‘Simple calculations element’ that comes with the plugin to do calculations on a list :slight_smile:

Hi Thimo! I have asked you a question in another thread to your FinancialCharts Plugin. As it was not really suitable for my purpose, I am trying ApexCharts. Is it possible to set a type of x-axis to date, so it displays different dates with right distance from each other? I really love how stepped area charts look. Maybe it is possible to set x axis as time scale ?

@vienna.opportunities you can use a grouping to display a range of dates on the x-axis. Here is a demo: Chartpreview | Bubble Editor

You can replace the missing values using this feature:

Hi Thimo, thanks a lot mate! That’s exactly what I need! I don’t need to replace null/undefined values by 0, but with previous value instead. That was my biggest struggle till now, because people had transactions only on some days, hence balance of account was edited also only on some days. And you have exactly this function in your plugin! It just takes value from previous day and copies it! Thats amazing!
Bildschirmfoto 2021-11-26 um 11.26.33

1 Like

Hi Thimo, is it also possible to create a pie / donut diagram with infinite number of categories and random colours? Like if I want to display user’s expenses sorted by his categories, while I dont know how many categories he may have.

@vienna.opportunities As the pie/donut chart accepts a list of number & categories, this could be of infinite length. You can enable monochrome mode to have the plugin make different shades of a color for every value:

Hi, I have the same problem as @brightmike154, you fixed it?

Hi Thimo, got a question on the Radar Charts. I have a couple of products with various categories scores. So when a user clicks on a product, I would like the category scores to be displayed as a radar chart. Any idea how to build that? Currently, the radar chart design seems to allow the display for only one product and the categories.

My Product Rating:

Product Ranking

Thanks!

Hi Timo!


This is how the chart looks, it shows the balance on account on each day. When user adds new transaction, the chart does not re-render. Even if I add the step at the worklflow to re-render the chart, the arealine disappears and emerges like if it would re-render, but without the new data. This is how the worklflow look like.

Only when I refresh the page I see new transaction and new balance on the chart. Is this a way to fix this?

Also, I would like to make some visual changes to the chart, if it is possible. Maybe you know whether some of them could be done?

  1. Set x-axis to the middle of the chart. Now, if the max balance is 1.000 and min balance is -10.000, the x-axis is on the top of the chart.
  2. Make the labels of x-axis more beautiful. The chart automatically rotates them to 45 degrees and puts “…” instead of the year.
    Bildschirmfoto 2021-12-08 um 12.05.24
    Even if i set “Tick amount x-axis” to 10 or even less so that there is enough place to write the whole date, the chart cuts it off. Is it possible to fix it?
  3. I have tried to make the values above 0 of blue and under 0 of red through conditions, but it does not work as its possible to set only the color of whole dataset, not of particular datapoints based on their value. Could you implement this feature in the future?
    Thanks !

@vienna.opportunities

It could be that Bubble doesn’t refresh this search. You can save your data to a custom state and use this state instead of the ‘do a search’ you have doe the charts. You can update this state accordingly when (in your case) a new transaction is created.

There is no support (yet) for an x-axis in the middle of the chart, if this gets supported I will add it to the plugin :slight_smile:

Will look into this if I can improve this! You could hide the x-axis and make a custom one with for example Bubble elements to have an indicative x-axis that is fully custom. For example this one I made for a project of mine:

2021-12-12 om 17.40.15

This feature is not yet supported by the plugin, but I will look into if I can add this in a future update for you! :slight_smile: