[Plugin Update: 2021] TechBlocks Charts and Graphs (Chart.js)

@alex4 this is a great first step - I really appreciate how quickly you’ve added the new feature.

A couple of enhancement requests:

  • The Bubble editor is throwing errors related to “Data Label Text” and the four Unit Before/After X/Y fields when these don’t have values. There are cases when these fields are not needed so it would be nice if the errors only presented if/when they were actually required. I’m not sure if this is something you can control on the plugin side or not.
  • Instead of having a global on/off data label setting for the entire chart, would it be possible to set a flag on each data series (I’m adding all my series via workflow) that would control whether the labels for a particular series would be on/off? In the example chart attached below, I would then have the ability to show the series name label for the diamonds but hide it for the circles.
  • Alternatively, if you could incorporate a new datafield for each series called “custom label” I could then attach my desired values of “0, 1, 2, 3, … 10” to each of the circles. I can’t simply make the series name the numerical values because I want to show a more detailed series name in my custom tooltip on hover.
  • It would also be useful if the label positioning/font settings could be applied on a per-series basis as well. I would then be able to center labels for one series on their anchors while the other series had labels positioned to the right of their anchor.

I’m happy to provide additional feedback or test other betas as you continue working on the new feature - just let me know.

Thank you for your response!

For example, when the minimum of the graph is 3 and maximum is 16, the graph shows 3~16.
But I want to shows from 0 to 20.
In the attachment screenshot, minimum is 1 and maximum is 3, but it have to be shown from 0 to5.
(Maximum is set for showing the label. In the screenshot, ‘3’ is not shown completely.)

Thank you for your help.
screenshot 2021-05-24 10.36.29

Thanks for the feedback @Kent!

  • The Bubble editor is throwing errors related to “Data Label Text” and the four Unit Before/After X/Y fields when these don’t have values. There are cases when these fields are not needed so it would be nice if the errors only presented if/when they were actually required. I’m not sure if this is something you can control on the plugin side or not.
  1. Thanks for flagging this – these fields should now be optional in the new update.
  • Instead of having a global on/off data label setting for the entire chart, would it be possible to set a flag on each data series (I’m adding all my series via workflow) that would control whether the labels for a particular series would be on/off? In the example chart attached below, I would then have the ability to show the series name label for the diamonds but hide it for the circles.
  1. Makes sense, I’ll look into this
  • Alternatively, if you could incorporate a new datafield for each series called “custom label” I could then attach my desired values of “0, 1, 2, 3, … 10” to each of the circles. I can’t simply make the series name the numerical values because I want to show a more detailed series name in my custom tooltip on hover.
  1. I’m not sure I fully understand what you mean here. Could you expand on that?
  • It would also be useful if the label positioning/font settings could be applied on a per-series basis as well. I would then be able to center labels for one series on their anchors while the other series had labels positioned to the right of their anchor.

I’ll DM you about this one!

Great job with the new labels for scatter charts. i look forward to having them on Bubble charts

@alex4, thanks for making those new fields optional - I’m no longer getting errors in the Bubble Editor.

Related to my “custom label” feature request, here is some additional information:

First of all, I am ultimately trying to replicate the following Google Spreadsheets chart in my Bubble App:

This chart incorporates two “types” of data points:

  1. Portfolios (represented by larger circles, each with a number label)
  2. Asset Classes (represented by smaller circles, each with a text label such as “Equity•U.S.”)
    Note: there are other small yellow circles with no labels in the example chart but please ignore those for this discussion.

With the new scatterplot label feature in your plugin, I can model everything I need for the Asset Classes, as the label for those data points is the same as the Series Name (for example, “Equity•U.S.”).

However, for the Portfolio data points, I would like the Series Name to be a longer text description (e.g. “Model Portfolio - Conservative”) which can be shown in a custom tooltip when a data point is hovered. I would therefore need the plugin to make another text field available that could be used for each data point label on the chart for cases where the desired label is different from the Series Name. So what I am requesting is to add an additional field (called for example “Custom Label”) in each data series’ settings panel where a text string can be stored that could then be used as the source for each data point label on the chart.

For an example Portfolio data point, the data would be something like the following:

  • X value: 4.8%
  • Y value: 2.9%
  • Series Name: “Model Portfolio - Conservative”
  • Custom Label: “3”

The Series Name value would then be available in the custom tooltip on hover (this is already an available feature) whereas the Custom Label could be used for the data point label in the scatterplot (the new enhancement I’m requesting).

Does this help explain the functionality I’m trying to create? I think adding a “custom label” option would make the label feature very powerful and flexible for a wide variety of use cases beyond just what I’m looking for.

Thanks,
Kent

1 Like

Update in v3.2.0: Added the ability to turn on/off Data Labels per series on Scatter Charts

In the workflow actions to add series to a Scatter Chart, there is now a new field called “Show Data Labels” enabling users to create a chart with a mix of series that have/don’t have labels. FYI @Kent I believe this is a part of your need!

@Kent – thanks for explaining the “Custom Label” use case you’re needing so thoroughly. I’ll add it to my backlog and think through it.

@fact-field – thanks for the additional info. If the data labels are going out of the group’s visibility, there are a couple of options:

  1. You can change the offset of the data label (for example, negative 20 would put the label inside of your bar)
  2. You can make the data label’s anchor “center” and change the data label color to white, black, or another color so that it stands out against the bar
    bardatalabelanchor
  3. You can change the max and min to be the maximum of your data set’s values + and - a buffer so that they appear on the chart.

Let me know if you have any other questions!

@princesssoria13 thanks for the kind words. Happy to hear the charts have been helpful for you. I’ll be adding the data labels to Bubble charts in the next day or two. Keep an eye out for an announcement!

1 Like

I see. Thank you. Looking forward to it!

1 Like

Update in v4.0.0: Bubble Charts & Scatter Charts now have Data Label Options

When you upgrade the plugin and add a Bubble or Scatter Chart to your page, you’ll see a new section called “Data Labels” with several new properties on the Bubble Chart and Scatter Chart elements, including the following customizations:

  • Data Label Text (you can configure what appears in the data label, for instance, X value, Y value, Radius Value, and series name as well as units before/after the X, Y, Radius values)
  • Font size, family, color
  • Data label placement
  • Set up labels to be viewable for certain series and not visible for others (via workflow action when adding a series)
  • Units before and after X, Y, R values

@princesssoria13 FYI data labels are available for Bubble Charts now!

Enjoy and don’t hesitate to send feedback!
Alex

How do you set up the label? What if I want the data to show up first and then the name? For example $1.000.000 - Profit

1 Like

Hey @princesssoria13 I assume you mean for the Scatter/Bubble Charts?

You can set up the Data Label in the “Data Label Text” property on the element. You can customize what appears in the data label using a combination of the strings “x”, “y”, “r”, and “seriesName”. For example, if you wanted to just show the X value and then the series name, you could just type “x, seriesName” in the Data Label Text property. If you needed units or a space in between those strings, you could add them in the “Unit Before X” property and the “Unit After X” property.

Hope that helps and don’t hesitate to let me know if you have any other feedback or questions!

Alex

Perfect. Nicely built so that it is flexible

Updates in v4.0.1: Added “Remove all Data Series” workflow action

Hi all, added a new workflow action called “Remove all Data Series (Clear Charts)” for Bar, Line, Radar, Scatter, and Bubble Charts. This action removes all data series and their labels from the charts. Thanks for the feature suggestion @lindsay_knowcode!

Happy Bubbling,
Alex

1 Like

@underhill.dan yes, you can absolutely customize the amount of space between each bar in the bar chart. Here’s a screenshot of the properties that you can use to set up the space between the charts:

  1. You can use “Bar Width (Bar)” to adjust the amount of space between each bar within a given X value
  2. You can use “Category Width (Bar)” to adjust the white space between each set of series values for a given X value
  3. You can override the value in #1 using an exact bar thickness in pixels

Let me know if you have any follow up questions!
Alex

1 Like

Thanks @alex4

That helped. Looking better now after tweaking those parameters.

Thanks, Dan

1 Like

@underhill.dan no prob! Glad to hear it’s working out well for you.

Don’t hesitate to reach out with any other questions!

@alex4 on your demo page. You achieved this chart.
image
via a workflow - add series which gave the option to add chart type as line chart.

How do I achieve this same chart without a workflow?
ie. I just want it to display a bar chart and a line chart dynamically without having to do a manual workflow?

1 Like

Hey @hello.plannwin – thanks for reaching out.

Currently, you can only achieve Mixed Bar and Line Charts using workflows. I have this on my backlog that I should be able to complete soon. Will keep you posted!

By the way, what’s the reason you want to achieve this without workflows?

Alex

Hey Alex, great job with this plug in so far. Do you support different axis types?

1 Like

Hey @mufei401 thanks for the kind words and for reaching out. Could you specify what you mean exactly by different axis types?

Best,
Alex

hi @alex4

dynamic data changes, each time data change a work flow would be required to update the chart.