Have you implemented a heat map chart?

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??


1 Like

Can you explain / give an example of the heatmap type you want? There’s different solution for that depending of your case

One like this one.

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

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