Forum Academy Marketplace Showcase Pricing Features

[New Plugin] Simple Charts

Update in v2.41.16: Bar/Line Chart Animation

Previously, the Bar/Line Chart element did not animate if you added the series values in the element properties (meaning you’d need to add them via the workflow actions to get the Bar/Line to animate). Now, the Bar/Line animates when the data is loaded! I’ll be adding this feature to the other chart types in the days to come.

Alex

Update in v2.43.0: Rounded Corners for Doughnut Charts!

You can now round the corners of each section for Doughnut Charts. You have three options:

  1. Square Section Corners
  2. Rounded Corners (All Sections)
  3. Rounded Corners (Single Section)

Here’s an example of this in action:
roundedcornerdonut

That’s sick bro. I love that nice styling! Is that css or a built in chart library function?

@alex4 I just purchased your charts plugin and I’m trying to create my first chart (a donut chart in my case). I have the chart working with dynamic labels and dynamic values without any problem, but I can’t seem to get dynamic pie chart colours working. I need dynamic colours because I always want to tie the same colour to a particular category in my pie charts but depending on the context, certain categories may or may not be included in the pie. In testing, if I put a static list of colours in the field (e.g. #4A86E8,#E8685E,#EA4335,#EA958E,#D7B0C3,#D57DA8) the chart loads fine, but if I change the field to reference a string created by doing a “search for…” and “format as text”, my chart doesn’t load - all I get when previewing my app in debug mode is a “General Error” without any other helpful clues.

Here is a screenshot showing my chart’s properties in case that is helpful. As you can see, in this case, the dynamic “search for…” and “format as text” has generated the string of hex codes and it looks valid to me.

I am in need of some help please! I am trying to merge two lists together from a dynamic date range. Here is what it looks like currently. Ignore the dropdown, that will modify which metric is currently in view.


The repeating group on the left is the list of data showing how far the athlete ran in meters on a training day. The middle repeating group is a list of dates in sequential order. The repeating group on the right is the two lists merged together. I cannot figure out a way to show the repeating group on the rights data in the chart and have it align to the proper date. @alex4 let me know if this is possible and how to accomplish. Thank you and I love the plugin outside of my current frustration!

Tom

@jared.gibb thank you :slight_smile: – it’s a custom extension for the library that I added!

@Kent and @tom8 I’ll take a look at your questions can get back to you by Monday!

Alex

@Kent thanks for reaching out! Would you mind either sharing with me a link to your app in a DM or adding a text group to your page that refers to the dynamic colors expression and sharing with me what the text string is?

My suspicion is that your colors might be saving as rgba (instead of hex) which has commas in it (e.g. rgba(255, 255, 255, 1) which is throwing off the logic in the plugin that uses the comma to separate between colors.

Alex

@alex4 Here is a screenshot showing the resulting string of my dynamic colours expression when the app loads:

In case you need to copy/paste the result for testing, the string is #4A86E8,#E8685E,#EA4335,#EA958E,#D7B0C3,#D57DA8 which matches character-for-character with the static value that I was initially putting directly in the pie chart colour field (with the chart loading fine) before trying to make the colours dynamic.

Based on this string, it seems that the hex codes are being loaded properly rather than anything related to rgba format.

For reference, here is how I’m building the dynamic colour string:

  1. I have an option set called Asset Classes and each Asset Class has an attribute called “Colour” in which I store a hex code (e.g. #4A86E8).

  2. When building my pie chart, I do a search for Portfolio Allocations which returns a list. I then do a “Format as Text” on this list to build a string based on each Portfolio Allocation’s Asset Class’s Colour, using a comma as the delimiter.

On a completely different note, I see that Charts.js supports multiple series for pie/donut charts. I have a need for a pie chart with two series, so I’m wondering if this functionality could be added to your plugin? I assumed it would be supported since it was part of Charts.js but I should have thought to confirm this before purchasing your plugin.

Hey @Kent thanks for the additional info!

  1. Tried using the setup that you’re describing to reproduce the issue but it still looks fine on my end. Could you DM me a link to your editor? I want to make sure everything is set up the same.

  2. I’ll take a look at the multiple series request for Pie/Donut Charts – that feature certainly makes sense. Will keep you posted.

Alex

Hey @tom8 – it looks like some date have corresponding distance values, others don’t, and you’re trying to skip the dates on the graph that don’t have distance values. Let me know if that’s a misunderstanding. If that’s the case, which chart type is this?

If it’s Bar/Line you might want to try using Scatter (this can take in date values on the X-axis) and set “Connect points?” to true. Let me know if that works at all!

Alex

@alex4 I am trying to show all dates, including the dates when the Total Distance is 0. I tried to setup the scatter chart as you recommended, and I can’t seem to get the values to show up. Here are the exact settings I am using. As you will see after the chart setting pictures, I attached images of the data that is loading, but not showing up. Thanks in advance for your help!




Let me know if there are more details that I can add. Thanks again!

Tom

@alex4 I sent you a DM with additional details. I also did some additional testing and realized that the issue relates to the fact that the datasource for the dynamic pie chart colours changes based on a selection I make in a dropdown element. This dropdown element starts with no value (i.e. the dropdown is blank) and that was causing the Bubble error I was encountering. I was able to resolve the error by setting the pie chart colours field to a static value and using a conditional on the chart element to change the pie chart colours field to a dynamic value only when the dropdown’s value is not empty. This worked for my needs but it might be helpful to build in some kind of error checking to the underlying plugin code for the case where the pie chart colour field is empty to avoid a Bubble error for others. Let me know if you require any additional info for me to help with this.

Sending you a DM to look into this @tom8

Hi @Kent — thanks for those additional details. I’ll add it to my backlog to handle those cases more gracefully. Will probably get to it next week!

Alex