Graphing Multiple Series (with a twist!)

[bmcgonigal]

I’m an intermediate bubble user who’s been banging my head against the wall trying to find a solution to one of my toughest visualization problems!

TL;dr (watch video)
I’m plotting multiple series on the same graph. Unfortunately, the series are not the same size. When I’m graphing multiple series on the same line chart (using a plug-in), my values are not lining up with the X axis at all!

Note, I cannot use null values to make the series the same size, they are different sizes for a reason

Problem Details: Link to Simplified Demo Editor here - play around!
There is an underlying assumption for all of the line chart plug-ins that when using multiple series, every series has the exact same amount of values.

I’d like the line chart to act like a scatterplot, where each point is mapped to a general X axis. There’s more of this in the video below - if you have any questions please comment below!

Brett

Bubble Graphing Issue

[autovantaofficial]

If I were you, I’d email bubble support for something this complex.

[bmcgonigal]

Any specific people to reach out to? Or just the general bubble support email and I’ll get bounced around until the right person gets my call.

[flusk]

Hey @bmcgonigal

I have decided to take this as a challenge for myself. It looks like you need to interpolate the missing values yourself (not null, but proportionally correct values in between) if you want to use the built-in chart solutions (which doesn’t sound like fun or easy at all).

I have utilized chartjs (a feature that is not modeled in any plugin as far as I see) to automatically do it in an HTML element. See the demo below:

It is simply, if you can put the data into the format in the textboxes (first and second), then, it will interpolate automatically. In these two inputs, the letters are the X-axis, and the numbers are the Y-axis of course.

This is the HTML element with fixed data (see the data elements):

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div>
  <canvas id="myChart"></canvas>
</div>

<script>
  const ctx = document.getElementById('myChart');
    const config = {
      type: 'line',
      data: {
          datasets: [{
              label:"First",
              data: [
                  {x:"a",y:1},
                  {x:"b",y:2},
                  {x:"c",y:3},
                  {x:"d",y:4},
                  {x:"e",y:5}
              ]
          },{
              label:"Second",
              data: [
                   {x:"a",y:1},
                   {x:"e",y:2}
              ]
          }]
      },
      options: {
        scales: {
          y: {
            type: 'linear'
          }
        }
      }
    };
  new Chart(ctx, config);
</script>

And here is the editor if you want to check the details and how the data is received dynamically from the textboxes: Bubble Demos by Flusk | Bubble Editor

And you can utilize many different configs of chartjs: Line Chart | Chart.js

Of course, this is not no-code anymore

@Huseyin from Flusk | Discover the #1 Security and Monitoring Tool for Bubble

[autovantaofficial]

Just email support@bubble.io

They will reroute your request to the right person. It takes like a day, maximum. Sometimes when they’re overbooked (and they’ll tell you when) then it takes 2ish days. After they’re pretty fast and effective.

Also, I also wouldn’t unlock the editor for anyone on forum if I were you…maybe something you’d only want to do w/ a bubble support specialist.

Hopefully that helps! Let me know how it goes. I’ve contacted support multiple times, each time I was satisfied.

[bmcgonigal]

Thanks for the reply thats super helpful - yes I made my editor read only to prevent funny business haha. Thanks for the tips

[bmcgonigal]

Dude this is insane!! I’m currently working through this and will report my success when I get it to work.

Your attention to detail for making this easy to understand is unreal. The fact that you made a gif to explain your process is even more unreal.

Thanks a million, and drop me your email in the personal chat I’ll buy you a coffee!

[bmcgonigal]

Hey! Wanted to let you know I finally got this to work (woooo!). I kind of put it off for a long time, but just got around to it this past week. Thanks a million again you rock