Hi All
I am looking for a Heatmap chart option to implement in the bubble app. I have chart tools which is awesome for your standard charts but I need a Heatmap style solution that plays well with Bubble.
Any suggestions??
Thanks!
1 Like
Can you explain / give an example of the heatmap type you want? There’s different solution for that depending of your case
But with data pulled form stats frequency
Do you have an example of your data?
That is a complex one but in terms of the output out of 100 possible score
South North West East
Completely disagree 40 25 10 10
Disagree 15 35 20 25
Slightly Disagree 10 10 30 5
Agree 10 20 30 10
Completely Agree 25 10 10 50
Completely disagree would be Red moving to green for Completely agree
I forget, but normally, a heatmap is based on the value. This mean that Higher number will be darker than lower. If I follow your data, Completely Disagree South, will be very similar that completely agree East (40/50). In your case, this is not really a heatmap that you need but more a kind of a bar chart. And I think that you can just do a table with Red line, orange line, yellow line, light green and dark green.
However, I have a solution where we can allow a specific color to a line and the color will be darker according to the value. So Completely disagree will be red, But South will be darker red than West and East for example.
It is a heat map and the example I gave was a basic example the data I will be using is a lot more complex but follows the same principle.
I found a solution here: https://apexcharts.com/docs/chart-types/heatmap-charts/
Yes this is the exact solution I have. I can create a plugin for that no problem.
But like I said, with this heatmap script, Your Completely Disagree South 40 will be almost the same color that the East Completely agree. OR, there’s anoter setting that we can use where Completely Disagree will be red but Higher number will be darker and we can set a different color for each line.
I will try to build a demo of both using the Apex script
@StevenM
What do you think of:
Yep this is good.
For something more heat map traditional try this with a linear colour transition form 1 to 100
South North West East
Round 1 40 25 10 10
Round 2 15 35 20 25
Round 3 10 10 30 25
Round 4 10 20 30 10
Round 5 25 10 10 30
In terms of the data. The data will come from a Query and expression such as :average or :count/ x, :sum etc…
The range will not always be 1 to 100 but you could always bring it back to 100
to be more specific https://apexcharts.com/javascript-chart-demos/heatmap-charts/basic/
Yes. In this case, We just remove all color and keep 1
My demo was based on this sentence: Completely disagree would be Red moving to green for Completely agree
Yep, so from I can see and playing with the script you can use html to implement the chart easy, but requires a script to be able to convert the query data from bubble into x and y and series size
I am not sure it needs plugin but just a script that takes the list of data from bubble and applies to series x and y and writes the ‘data’, maybe it’s easier with a plugin to dynamically create the series and data
name: "Series 1",
data: [{
x: 'W1',
y: 22
}, {
x: 'W2',
y: 29
}, {
x: 'W3',
y: 13
}, {
x: 'W4',
y: 32
}]Probably easier for the non programmer with a plugin to allow for easy implementation of plot options.
yes it will be easier
There’s also different way to enter data for the chart
Well yeah I would say there is probably interest in the bubble community if you wanted to build a plugin for this. It does seem the other chart solutions do not have this option even if they wanted to.
1 Like
I know you have a solution, But I sent a New plugin to market. Waiting for approval. But you can have a preview here