[New Plugin] Simple Charts

[mihira]

@alex4 Do all charts in this plugin have a transparent background and dynamic font/line colours?

[alex4]

Hi @mihira – yes, all of them have (1) a transparent background and (2) you can customize: the font color (from the Element font properties), gridline colors (horizontal and vertical), and X/Y axis color

Let me know if you have any other questions or requests!
Alex
TechBlocks

[alex4]

Hi Bubblers, I added another chart type for Simple Charts – Stepped Line Charts! You can view an example on the run mode demo under the “Line Chart” section.

Below is an example screenshot of the Stepped Line Chart you can create using the plugin:

Let me know if you have any questions or feedback!
Alex
TechBlocks

[alex4]

Hi all, added a new property called “Thousands Separator” for all of the charts. Many languages don’t separate the thousands place using a comma (the “,” character), so this update is intended to support that. For instance, some places use “.” or " " to separate the thousands place (like 1.000.000 or 1 000 000 for one million).

Every chart in this plugin now has the following input:

That character will be used in the tick labels, data labels, and hover tooltips for the thousands separator. For example, the first chart below uses the “.” separator for the thousands place and the second one uses the " " separator:

Alex
TechBlocks

[alex4]

Hi All, just added a new property for Scatter/Point Charts called Point Style, which enables you to customize the style of each point on your Scatter/Point Chart. Here is an example of circle and triangle Point Styles:

You can choose from a full list of point styles in the element inspector as seen below:

Full demo here.

Enjoy!
Alex
TechBlocks

[mihira]

Hi @alex4,

Great plugin, but there are some areas where I’m having difficulty:

I’m using the ComplexListCalculations element to display Revenue vs. Month and Expenses vs. Month on the same bar graph.

The number on the X axis corresponds to the month - 8 = August.

So far I’m just trying to fix 3 things:

1. To control the number of decimal places that are displayed.
   

2. Disable the Y value from being appended to the X label.

3. To use conditions or some other method to replace the numerical representation of the month with the text representation - August instead of 8.

I would appreciate any insights you can share.

[alex4]

Hi @mihira – thanks for reaching out!

1. To control the number of decimal places, you can use the bubble “formatted as” and set the decimal places number to what works for you
   

   

2. I’m not sure why the Y value would be appended to the X label. Can you share a link to your editor or a screenshot of the expression you’re using for the X Labels (from the Bubble editor)?

3. In order to show the month name instead of the month number, you can try something like this, where you convert each number into a text and use Bubble’s find & replace for each of the numbers to their respective months. For example, your find & replace would start by finding 12 and replacing with December, then find 11 and replace with November, and so on. Does that make sense? Below is an example screenshot:
   

   

Let me know if that helps or if you have any other questions!
Alex
TechBlocks

[mihira]

@alex4, The Y Value appends to the X label because I’m using the “Concatenate” setting in the ComplexListCalculations element. I’m trying to use 2 elements in conjunction to bind the x values for revenue and expenses to the same y values.

Thanks for the advice, the formatting didn’t seem to be possible the way I currently have it setup but I’m trying a different albeit a bit more tedious approach.

[alex4]

Hey @mihira – helpful to know that you’re using the ComplexListCalculations element. Can you elaborate on what you mean when you say that you’re trying to use 2 elements in conjunction to bind the x values for revenue and expenses to the same y values?

I’m happy to take a closer look to see if I can point you in the right direction, just need to know more about what you’re hoping to achieve. A mockup or something similar might be helpful here as a wrap my head around what you’re hoping to do!

Alex
TechBlocks

[mihira]

Hi @alex4, It’s actually 3 elements - here are the steps:

This is just to convert cents into dollars.

This is to attach the output from A to the corresponding month.

This is to attach the expenses to the same month sequence as the payouts.

I’m currently getting an error when I do this:

Months where the expenses are zero are giving me Y values that are the same as the month.

The graph is setup as follows:

I’ve tried the find&replace function to replace 8 with August and it would work fine if the Y value was not appended to the X axis as you can see.

Thanks for looking into it!

[robhblake]

Hi guys, any idea why the “data labels” would always get cut off like this? Happens on both bar and horizontal bar charts. Is there any way to have the data labels inside of the bars?

Cheers
Rob

[alex4]

@mihira

I’ve tried the find&replace function to replace 8 with August and it would work fine if the Y value was not appended to the X axis as you can see.

Hi @mihiria, thanks for that extra information. Based on my understanding (correct me if I’m wrong):

1. For the Series 1 Y Values, it looks like you should be able to just enter your expression for List A in ComplexListCalcuations B. The “concatenate” operation is probably not needed here – it’s used for when you want to connect two string or number lists together (for example, List A: “1, 2, 3” concatenate with List B: “A, B, C” would output “1A, 2B, 3C”. If my understanding of your use case is correct, you should just enter what you have for ComplexListCalcuations A for the Series 1 Y Values.

2. For the X Axis Values, I think you could just enter the dynamic expression you have in ComplexListCalculations C, which is just the month number (no need to use the ComplexListCaluations element here). You can then use the find and replace for the month names.

Here is an example using static data but helps illustrate how to pair X axis values with the Series values:

^^ X Axis List is “Q1, Q2, Q3, Q4” here (no need to connect this list with the series values)

^^Series 1 Y Values is “45300, 15000, 40550, 65155” (no need to connect this list with the X axis values)

The plugin will automatically pair the values together, so Q1 will show 45300 as its value, Q2 will show 15000 as its value and so on:

Does that help and/or make sense? Let me know if I’m misunderstood your questions here!

Best,
Alex

[alex4]

Hey @robhblake – thanks for reaching out and pointing out that issue with the data labels. I’ll look into options on how to improve this and get back to you this week. Don’t hesitate if you have any questions/comments in the meantime!

Cheers,
Alex
TechBlocks

[mihira]

Hi Thanks @alex4, That works fine. I guess I was looking for an extra level of robustness to make sure that the records appear in the correct month and over did it. Thank you.

[alex4]

Hi Bubblers, new update: I’ve added several new properties for the data labels including:

• Anchor – so you can anchor your label to the top, middle, or bottom part (for example, anchor to top of each bar on the chart)
• Vertical Offset – so you can place the datalabel a specific number of pixels above or below the specified anchor point
• Data Label Background Color
• Data Label Font Color

Here is a screenshot of the new properties on the Charts!

Here is an example of Data Labels anchor = ‘end’, offset = -20, and color = white

Full run-mode demo here

@robhblake – this would built based on your initial feedback, so let me know what you think and if you have any other requests!

Happy bubbling,
Alex
TechBlocks

[alex4]

No problem @mihira. Glad it all worked out. Don’t hesitate to reach out with any other questions or feedback!

Best,
Alex

[mihira]

Hi @alex4, I’m seeing either a bug or a change in settings between versions 2.13.0 and 2.14.0:

The graph on V 2.13.0:

Same graph on V 2.14.0:

I haven’t changed anything besides the plugin version. Please let me know if i’m missing something. Thanks!

Regards,
Mihira

[alex4]

Hey @mihira – thanks for making me aware of that issue. I’ve pushed a fix and it should be working properly once you upgrade. Let me know if you notice otherwise!

Best,
Alex

[mihira]

Thanks for that quick update @alex4, It’s back to normal.

[alex4]

Hi all, just added an option for a new char type: “Stacked Bar (Horizontal)”! Here are screenshots of the new chart type in the editor and run-mode:

Let me know if you have any questions! Here’s the link to the full demo.

Cheers,
Alex