Forum Academy Marketplace Showcase Pricing Features

Bubble Chart Plugin - Bar Chart more than 1 Series

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

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.

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.

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:

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

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 #’

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.

1 Like

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

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.

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”

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.

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.

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

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

you need to have the code to create a chart

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

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

This is the html element on the page

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

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?

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

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 :slight_smile:

thank you in advance,

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:

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.

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