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

Hey Bubblers,

Since releasing the Simple Charts plugin in 2019, over 600 Bubble users have installed the plugin and provided lots of great feedback. Based on this feedback, we’ve added many new improvements including 100+ customizations, animations, click events, hover events, custom tooltips, and new chart types.

Take a look at the big updates I’ve made to the demo page here:
https://chartsdemo.bubbleapps.io

Bubble Plugin Page Link:

We’re always looking to improve the plugin, so as always, don’t hesitate to reach out with feedback and questions!

Alex
TechBlocks

21 Likes

Love the plugin! I am however finding that if I have a line chart and conditionally show another series on the same chart, then the conditional series continues being shown even after the condition is not valid anymore. Refreshing the entire page is required to clear the conditional chart.

2 Likes

Thanks for the kind words @christo1!

Did you try adding/removing the extra series via workflow action? Feel free to DM me a link or screenshot of your editor implementation – I am more than happy to take a look.

Alex

Very attractive. I invite people to look at your demo. Congrats. :partying_face:
I loved the 3rd column of the first dashboard, total bonus: 600M$ :sweat_smile:

4 Likes

Thanks @JohnMark I appreciate the encouraging feedback. Let me know if you have any feedback on the demo or the plugin!

3 Likes

Thanks for getting back to me.

I haven’t tried the workflow action. It is simply in a conditional. What I ended up doing is adding another chart and hiding and showing it instead. A bit clunky but avoids the issue.

1 Like

Hi, Alex!
Amazing job with this plugin! It looks like just what I need.

I was on your demo site and read the instructions. BUT…there were no dynamic configurations of the chart data. Is there somewhere with examples of that? I’m not really having any success yet.

Thanks!

Hi @carl.peterlin thanks for reaching out and for the kind words about the plugin!

Here is a link to a page with a dynamic data example, let me know if this is helpful. Happy to create additional examples if needed:
https://chartsdemo.bubbleapps.io/dynamic-data-examples

Alex

1 Like

Thanks, Alex! Looking now…

@christo1 understood, I’ll think through how I can make this less clunky

@carl.peterlin great, let me know if you have any questions!

1 Like

Another issue with the plugin. If I make the chart not visible using a checkbox, then it breaks the Zeroquode print plugin - won’t run. I then have to rather change the colour of the series with 100% transparency to hide it that way, then all works. The problem is when I have a chart with 4 colours in 4 series, the conditional to change the colours to 100% transparent does not work. For 2 series charts it works fine. I’ve made a video where I replicate the issue: Screen Recording 2021-04-15...

Hi @christo1 – hmm… the charts in this plugin are all built with standard HTML, CSS, Javascript as a Bubble element. I’m not sure how the Zeroqode print plugin was built but based on your description of the issue it sounds like it may be an issue with that plugin since it the charts are compatible with the TechBlocks screenshot plugin and are able to appear fine on the PNG images generated on that plugin.

Also, thanks for your video regarding the color update issue with conditionals – I’ll take a look at it this week and get back to you!

Best,
Alex

2 Likes

Thanks Alex,

Those conditionals were driving me nuts until I landed on the work around. I am sure others may experience the same.

Alex, I love this plugin. Just wanted to say, great job and thank you for the constant updates and improvements

2 Likes

Thank you @uzair7175 – I appreciate the kind words. Happy to hear that the plugin has been great for your use case!

1 Like

Hey there, is it possible to customize the thousands “,” for your charts? In my country we use “.”.

1 Like

Yes, @uzair7175 — this is a property called “thousands separator” on the element inspector. Let me know if you can’t find it!

I found it, Thank you so much!!! Really great work with this plugin!

@uzair7175 great to hear. Let me know if you have any other feedback. Always trying to improve the charts :slight_smile:

1 Like

@alex4 I’m working with a scatterplot that presents several series (necessary so that I can display different groups of colours of plotted dots) where I also need to be able to dynamically update the series data points based on user selections in the app (selections are made using check boxes and dropdowns). I was trying to achieve the dynamic data source by setting conditions on the series’ X and Y value sources when assigning them in the workflow, but the data sources don’t seem to update dynamically when the data source (e.g. a search) changes. Instead, I have to call the “Add a Data Series” workflow again (using the same series name as I used initially) any time I want to update the values that are displayed. This isn’t too much work, but in my use case the act of adding a new series (even though it is technically replacing an existing series) causes an animation and all data points come up from the bottom of the chart instead of updating instantly. Is there any way to turn this animation off? Perhaps there is a Chart.js setting that could be easily tapped into and a toggle added to the chart settings in Bubble?