Bubble Chart Plugin - Bar Chart more than 1 Series

boston85719 · 2020-07-06T09:08:32.436Z

In the bubble chart plugin editor there is only 1 series available for setting colors

Screen Shot 2020-07-06 at 4.05.26 PM343×747 33.5 KB

This seems like it is not possible to have more than 1 data series on the same bar chart for comparisons.

For example if I want to compare the number of Apples Sold Vs Purchased I would not be able to have two separate bars ( 1 representing Sold and the other Purchased ) for the same dates.

Is there a way to use the bubble chart plugin to achieve something like that? I’d like to show purchased with a red color and sold with a green color and make it so each date has two bars, one green and one red.

exception-rambler · 2020-07-06T09:59:17.793Z

It’s a limitation of the Bubble element.
Options are embedding your own JS in a HTML element and using a frame working like Chart.js, or using a paid plugin of which there are several.

boston85719 · 2020-07-06T10:51:53.783Z

Thanks for confirmation of the limitation.

I have been using my own JS in a HTML and have success, however, I was looking for an easier way to get the data into the bar chart.

At the moment I am stuck with having to manually enter each search results item # in the data of the JS for bar chart and I am wanting to make it into an array which would allow me to use an undefined number of results in the bar chart.

So my static data looks like this:

Screen Shot 2020-07-06 at 5.47.37 PM341×569 27.1 KB

and when I use dynamic data I have to set things up like this

Screen Shot 2020-07-06 at 5.48.30 PM339×701 66.1 KB

Which not only is cumbersome in adding the data but also limits the ability to have an undefined number of entries.

What I am looking to achieve is to allow the user to select a date range, and use that date range in my repeating groups :group by and have the entire number of days in the selected date range be used in the bar chart.

At the moment, I have to limit the results to a set of 7 or some other arbitrary number so as to manually plug in each search results ‘item #’

And for the life of me, I can’t figure out how to turn the data sets into an array of some kind so that I could just use the search results and have a ‘join with’ feature so I can extract the entire list to populate my datasets without manually entering the ‘item #’

exception-rambler · 2020-07-06T11:18:56.846Z

Yeh it’s cumbersome - definitely.
I’ve been there. About four years ago I was doing exactly this - it consumed huge amounts of my time - and is what led to me to develop Chart Tools… initially just to solve the problem for myself.
I’m afraid I can’t offer a cleaner solution to what you’re already doing.

kqkq · 2020-12-17T17:30:13.348Z

Hello,
Have you found a solution to your problem, I am in the same situation as you?

boston85719 · 2020-12-18T05:13:27.182Z

Which problem? Using the bar chart plugin for more than 1 series? If so, no, it doesn’t work.

Using my own code to create charts and getting the data in more easily? If so, yes.

kqkq · 2020-12-18T09:44:12.941Z

exception-rambler:

Options are embedding your own JS in a HTML element and using a frame working like Chart.js, or using a paid plugin of which there are several.

Yes “Using my own code to create charts and getting the data in more easily”. how to use the dynamic data in an html element ?
my problem is when I insert the data via “do a search” my items are displayed “element1, element2, element3, element4”

boston85719 · 2020-12-18T09:54:09.723Z

I don’t know how you are setting up your code for the charts to be displayed, but I am adding my data through Javascript.

If using an HTML element it is the same…just right click and select insert dynamic expression…then create the dynamic expression to reference your data correctly according to the code for your chart.

kqkq · 2020-12-18T10:01:11.772Z

my html element :
Capture d’écran du 2020-12-18 10-57-37

the result :
Capture d’écran du 2020-12-18 10-58-03

items are not separate. How use function js ? do you have an example?
Thank.

boston85719 · 2020-12-18T13:09:15.458Z

Here is a screen shot of how my dynamic expression looks

Screen Shot 2020-12-18 at 8.07.12 PM

Here is a post that is relevant…as is the post above it

List Shifter: Reverse, Rotate, Swap and ITERATE (Loop) Over Bubble Lists | Now Part of Floppy Showcase

Thanks for the thoughtful reply. Always appreciated and helpful. I had thought I set things up properly. My original method of using the repeating group I had things set up like this: [Screen Shot 2020-11-13 at 1.58.52 PM] which worked fine. Then I set up a version using list shifter and was getting the issue I described. I had basically copied the javascript and replaced the repeating group reference with list shifter and had the issue. I went in and created a basic test after reading your…

kqkq · 2020-12-18T13:26:32.604Z

ok thank you, “Run javascript” is called when page is load ? and the html element call the js ? how integrate the js inside the html element. thank you for your details

boston85719 · 2020-12-18T15:10:59.510Z

you need to have the code to create a chart

I found ones on https://codepen.io/

kqkq · 2020-12-18T15:19:41.879Z

yes i have a chart with code html , what I don’t understand is how to create the elements, and how they interact. (js + html + css + dynamic data), if I can have an example that would be very nice

boston85719 · 2020-12-19T05:21:21.640Z

This is the html element on the page

Screen Shot 2020-12-19 at 12.16.59 PM341×562 25.2 KB

Screen Shot 2020-12-19 at 12.17.12 PM727×770 74.1 KB

I use a button press to display the chart by running the Javascript off the button press…other ways to trigger javascript too

Here is the javascript

Screen Shot 2020-12-19 at 12.20.10 PM345×737 50 KB

Screen Shot 2020-12-19 at 12.20.04 PM346×735 41.6 KB

Screen Shot 2020-12-19 at 12.19.52 PM341×736 33.3 KB

Screen Shot 2020-12-19 at 12.19.38 PM339×734 36.7 KB

Screen Shot 2020-12-19 at 12.19.23 PM343×737 34.4 KB

kqkq · 2020-12-19T09:30:13.695Z

thank @boston85719,

I took a simple example from codepen “https://codepen.io/simmondsdt/pen/WgbXPy”, I copied the element the html code in the html element, and the javascript in my “workflow” when page is loaded / Run Javascript with the js code that I got from codepen, when I go to preview, no element is displayed. what am i missing?

boston85719 · 2020-12-19T12:40:09.172Z

I’m not sure could be a lot of different things. Try to copy the example I gave you

kqkq · 2020-12-21T14:56:05.842Z

Hello @boston85719,

is it possible to send me the example of your code by email or share the link of your application to me to avoid typing everything by hand

thank you in advance,

alex4 · 2021-05-22T15:25:46.643Z

Hey @boston85719 – just seeing this post now. I built a plugin using the same Chart.js library as Bubble’s that addresses the ability to add multiple series to a Line/Bar chart. Full disclosure that it is paid but includes a lot of features that aren’t available in Bubble’s chart element, so sharing it with you in case it’s helpful for you:

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

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 alway…

boston85719 · 2021-05-22T16:10:20.784Z

Thanks for sharing. I actually was able to just use the HTML element and Javascript to draw out my own charts and sorted through all the issues I had with that…looking back on the time it took to learn it and figure it out, it might have been better to seek a paid plugin solution, but nonetheless the learning experience helped me in various ways.

alex4 · 2021-05-22T17:18:36.896Z

@boston85719 I hear you on that – I’m sure it was a great learning experience!