# Custom element make Quadrant chart

**URL:** https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209
**Category:** Ask for Help
**Tags:** ai
**Created:** [November 26, 2024, 6:08pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209 "2024-11-26T18:08:05Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![Alexey\_Khrolovich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_khrolovich/32/37980_2.png) [@Alexey\_Khrolovich](https://community.glideapps.com/u/Alexey_Khrolovich)
#### Post date: [November 26, 2024, 6:08pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/1 "2024-11-26T18:08:06Z")

</div>

Hi All!

I need to arrange data from a table to Quadrant chart. There is  
-name  
-X position  
-Y position.

I made Y and X axis calculation to make it from 0 to 100 and try to use Custom AI component… but i found that it makes chart only for 1st element in table.  
Is there a way to make it create chart of all table records?

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [November 26, 2024, 7:28pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/2 "2024-11-26T19:28:53Z")

</div>

The custom component can only work with a single row. I think you best bet would be to create a JSON of all your table data, and then feed that JSON into your custom component.

---

<div class="post-metadata">

### Author: ![Alexey\_Khrolovich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_khrolovich/32/37980_2.png) [@Alexey\_Khrolovich](https://community.glideapps.com/u/Alexey_Khrolovich)
#### Post date: [November 27, 2024, 9:56am UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/3 "2024-11-27T09:56:31Z")

</div>

I made generation of link for [quickchart.io](http://quickchart.io) but its not such beautiful and cant make names right on graph…

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 27, 2024, 1:54pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/4 "2024-11-27T13:54:02Z")

</div>

Have you tried the AI component?

What do you mean by “can’t make names right on graph”?

---

<div class="post-metadata">

### Author: ![Alexey\_Khrolovich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_khrolovich/32/37980_2.png) [@Alexey\_Khrolovich](https://community.glideapps.com/u/Alexey_Khrolovich)
#### Post date: [November 28, 2024, 11:44am UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/5 "2024-11-28T11:44:39Z")

</div>

i generate link for [quickchart.io](http://quickchart.io) this is it: [https://quickchart.io/chart?c={type:‘bubble’,data:{datasets:[{label:‘name1’,data:[{x:46,y:26,r:11}](https://quickchart.io/chart?c=%7Btype:'bubble',data:%7Bdatasets:%5B%7Blabel:'name1',data:%5B%7Bx:46,y:26,r:11%7D)]},{label:‘name2’,data:[{x:7,y:37,r:13}]},{label:‘name3’,data:[{x:43,y:19,r:15}]},{label:‘name4’,data:[{x:5,y:40,r:9}]},{label:‘name5’,data:[{x:10,y:19,r:19}]},{label:‘name6’,data:[{x:100,y:45,r:12}]},{label:‘name7’,data:[{x:15,y:45,r:30}]},{label:‘name8’,data:[{x:2,y:14,r:4}]},{label:‘name9’,data:[{x:3,y:42,r:5}]},{label:‘name10’,data:[{x:47,y:67,r:2}]},{label:‘name11’,data:[{x:3,y:33,r:5}]}]}}

This generates chart but not as i want. Names are showed in legend abowe, i need it written on grapht.

I am trying to mage AI element make it from this link but not succed with promt yet…

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 28, 2024, 2:42pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/6 "2024-11-28T14:42:28Z")

</div>

Can you show us an image of that QuickChart URL in your app?

---

<div class="post-metadata">

### Author: ![Alexey\_Khrolovich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_khrolovich/32/37980_2.png) [@Alexey\_Khrolovich](https://community.glideapps.com/u/Alexey_Khrolovich)
#### Post date: [November 28, 2024, 3:31pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/7 "2024-11-28T15:31:36Z")

</div>

i just use web embed.

[quickchart.io](https://quickchart.io/chart?c=%7Btype:%27bubble%27,data:%7Bdatasets:%5B%7Blabel:%27name1%27,data:%5B%7Bx:46,y:26,r:11%7D%5D%7D,%7Blabel:%27name2%27,data:%5B%7Bx:7,y:37,r:13%7D%5D%7D,%7Blabel:%27name3%27,data:%5B%7Bx:43,y:19,r:15%7D%5D%7D,%7Blabel:%27name4%27,data:%5B%7Bx:5,y:40,r:9%7D%5D%7D,%7Blabel:%27name5%27,data:%5B%7Bx:10,y:19,r:19%7D%5D%7D,%7Blabel:%27name6%27,data:%5B%7Bx:100,y:45,r:12%7D%5D%7D,%7Blabel:%27name7%27,data:%5B%7Bx:15,y:45,r:30%7D%5D%7D,%7Blabel:%27name8%27,data:%5B%7Bx:2,y:14,r:4%7D%5D%7D,%7Blabel:%27name9%27,data:%5B%7Bx:3,y:42,r:5%7D%5D%7D,%7Blabel:%27name10%27,data:%5B%7Bx:47,y:67,r:2%7D%5D%7D,%7Blabel:%27name11%27,data:%5B%7Bx:3,y:33,r:5%7D%5D%7D%5D%7D%7D)

 ![chart](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/f/8f0e6b2aeaf4f4b64c1b28c258be669ce06b983e.png)

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 29, 2024, 12:36am UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/8 "2024-11-29T00:36:55Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/6/26e8fe8cac499860143e9eee67f77d640f00196c.png)

```auto

{
  type: 'bubble',
  data: {
    datasets: [
      { label: 'name1', data: [{ x: 46, y: 26, r: 11 }] },
      { label: 'name2', data: [{ x: 7, y: 37, r: 13 }] },
      { label: 'name3', data: [{ x: 43, y: 19, r: 15 }] },
      { label: 'name4', data: [{ x: 5, y: 40, r: 9 }] },
      { label: 'name5', data: [{ x: 10, y: 19, r: 19 }] },
      { label: 'name6', data: [{ x: 100, y: 45, r: 12 }] },
      { label: 'name7', data: [{ x: 15, y: 45, r: 30 }] },
      { label: 'name8', data: [{ x: 2, y: 14, r: 4 }] },
      { label: 'name9', data: [{ x: 3, y: 42, r: 5 }] },
      { label: 'name10', data: [{ x: 47, y: 67, r: 2 }] },
      { label: 'name11', data: [{ x: 3, y: 33, r: 5 }] },
    ],
  },
  options: {
    plugins: {
      datalabels: {
        anchor: function (context) {
          var value = context.dataset.data[context.dataIndex];
          return value.x < 1000 ? 'end' : 'center';
        },
        align: function (context) {
          var value = context.dataset.data[context.dataIndex];
          return value.x < 1000 ? 'end' : 'center';
        },
        color: function (context) {
          var value = context.dataset.data[context.dataIndex];
          return value.x < 1000 ? context.dataset.borderColor : 'white';
        },
        textAlign: 'center',
        font: {
          weight: 'bold',
          size: 6,
        },
        formatter: function (value, context) {
          return context.dataset.label + '\n' + Math.round(value.x) + ',' + Math.round(value.y);
        },
        offset: 2,
        padding: 0,
      },
    },
    legend: {
      display: false,
    },
    responsive: true,
    maintainAspectRatio: false,
  },
}

```

---

<div class="post-metadata">

### Author: ![Alexey\_Khrolovich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_khrolovich/32/37980_2.png) [@Alexey\_Khrolovich](https://community.glideapps.com/u/Alexey_Khrolovich)
#### Post date: [November 29, 2024, 9:34am UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/9 "2024-11-29T09:34:33Z")

</div>

wow.  
But i cant reseive same result…  
i understand that i must use it same way like this: [quickchart.io](https://quickchart.io/chart?c=%7Btype:'bubble',data:%7Bdatasets:%5B%7Blabel:'name1',data:%5B%7Bx:46,y:26,r:11%7D%5D%7D,%7Blabel:'name2',data:%5B%7Bx:7,y:37,r:13%7D%5D%7D,%7Blabel:'name3',data:%5B%7Bx:43,y:19,r:15%7D%5D%7D,%7Blabel:'name4',data:%5B%7Bx:5,y:40,r:9%7D%5D%7D,%7Blabel:'name5',data:%5B%7Bx:10,y:19,r:19%7D%5D%7D,%7Blabel:'name6',data:%5B%7Bx:100,y:45,r:12%7D%5D%7D,%7Blabel:'name7',data:%5B%7Bx:15,y:45,r:30%7D%5D%7D,%7Blabel:'name8',data:%5B%7Bx:2,y:14,r:4%7D%5D%7D,%7Blabel:'name9',data:%5B%7Bx:3,y:42,r:5%7D%5D%7D,%7Blabel:'name10',data:%5B%7Bx:47,y:67,r:2%7D%5D%7D,%7Blabel:'name11',data:%5B%7Bx:3,y:33,r:5%7D%5D%7D,%5D,%7D,options:%7Bplugins:%7Bdatalabels:%7Banchor:function(context)%7Bvarvalue=context.dataset.data%5Bcontext.dataIndex%5D;returnvalue.x%3C1000?'end':'center';%7D,align:function(context)%7Bvarvalue=context.dataset.data%5Bcontext.dataIndex%5D;returnvalue.x%3C1000?'end':'center';%7D,color:function(context)%7Bvarvalue=context.dataset.data%5Bcontext.dataIndex%5D;returnvalue.x%3C1000?context.dataset.borderColor:'white';%7D,textAlign:'center',font:%7Bweight:'bold',size:6,%7D,formatter:function(value,context)%7Breturncontext.dataset.label+'%5Cn'+Math.round(value.x)+','+Math.round(value.y);%7D,offset:2,padding:0,%7D,%7D,legend:%7Bdisplay:false,%7D,responsive:true,maintainAspectRatio:false,%7D,%7D)

But it gives  
 ![chart](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/d/ed20b5e6b25839c506d724e975a9313d08c54a97.png)

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 30, 2024, 1:09am UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/10 "2024-11-30T01:09:15Z")

</div>

![CleanShot 2024-11-30 at 08.07.01](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/24ed9e265819deeb142c1a1234c89f3e4a4d4034.jpeg)

 ![CleanShot 2024-11-30 at 08.08.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a2470867f33aca9f0cb7951ab6ab3239b3f3087c.png)

The configuration part is the thing I added above. You can have a template column to insert your “datasets” part. Then display the final result with an image component.

---

<div class="post-metadata">

### Author: ![Alexey\_Khrolovich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_khrolovich/32/37980_2.png) [@Alexey\_Khrolovich](https://community.glideapps.com/u/Alexey_Khrolovich)
#### Post date: [December 2, 2024, 7:22am UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/11 "2024-12-02T07:22:23Z")

</div>

Thank you so much!  
I only removed this part _+ ‘\n’ + Math.round(value.x) + ‘,’ + Math.round(value.y)_ so i have only names.

Is there possibility to make it draw 1 vertical line in center and 1 horisontal in center?

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [December 4, 2024, 12:41am UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/12 "2024-12-04T00:41:41Z")

</div>

![CleanShot 2024-12-04 at 07.41.11](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f73530cc3cc331fda1c98623207e8483c43f0aec.png)

Please use this in an HTML to URL column, and use Web Embed to display it.

```auto
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart.js Bubble Chart with Dynamic Central Line</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
  <canvas id="myChart" width="600" height="1200"></canvas>
  <script>
    Chart.register(ChartDataLabels);
    
    const ctx = document.getElementById('myChart').getContext('2d');

    const data = [
      { label: 'name1', data: [{ x: 46, y: 26, r: 11 }], backgroundColor: 'rgba(255, 99, 132, 0.5)' },
      { label: 'name2', data: [{ x: 7, y: 37, r: 13 }], backgroundColor: 'rgba(54, 162, 235, 0.5)' },
      { label: 'name3', data: [{ x: 43, y: 19, r: 15 }], backgroundColor: 'rgba(255, 206, 86, 0.5)' },
      { label: 'name4', data: [{ x: 5, y: 40, r: 9 }], backgroundColor: 'rgba(75, 192, 192, 0.5)' },
      { label: 'name5', data: [{ x: 10, y: 19, r: 19 }], backgroundColor: 'rgba(153, 102, 255, 0.5)' },
      { label: 'name6', data: [{ x: 100, y: 45, r: 12 }], backgroundColor: 'rgba(255, 159, 64, 0.5)' },
      { label: 'name7', data: [{ x: 15, y: 45, r: 30 }], backgroundColor: 'rgba(255, 99, 132, 0.5)' },
      { label: 'name8', data: [{ x: 2, y: 14, r: 4 }], backgroundColor: 'rgba(54, 162, 235, 0.5)' },
      { label: 'name9', data: [{ x: 3, y: 42, r: 5 }], backgroundColor: 'rgba(255, 206, 86, 0.5)' },
      { label: 'name10', data: [{ x: 47, y: 67, r: 2 }], backgroundColor: 'rgba(75, 192, 192, 0.5)' },
      { label: 'name11', data: [{ x: 3, y: 33, r: 5 }], backgroundColor: 'rgba(153, 102, 255, 0.5)' },
    ];

    const xValues = data.map(item => item.data[0].x);
    const yValues = data.map(item => item.data[0].y);
    
    const xAverage = xValues.reduce((a, b) => a + b) / xValues.length;
    const yAverage = yValues.reduce((a, b) => a + b) / yValues.length;

    const config = {
      type: 'bubble',
      data: {
        datasets: data,
      },
      options: {
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            enabled: true, // Enable tooltips
            callbacks: {
              label: function(context) {
                const point = context.raw;
                return [
                  `Name: ${context.dataset.label}`,
                  `X: ${point.x}`,
                  `Y: ${point.y}`,
                  `Size: ${point.r}`
                ];
              }
            }
          },
          datalabels: {
            color: 'black',
            display: true,
            font: {
              weight: 'bold',
              size: 12
            },
            formatter: function(value, context) {
              return context.dataset.label;
            },
            anchor: 'bottom',
            align: 'bottom',
            offset: 5
          },
          annotation: {
            annotations: {
              verticalLine: {
                type: 'line',
                xMin: xAverage,
                xMax: xAverage,
                borderColor: 'black',
                borderWidth: 3,
              },
              horizontalLine: {
                type: 'line',
                yMin: yAverage,
                yMax: yAverage,
                borderColor: 'black',
                borderWidth: 3,
              },
            },
          }
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          x: {
            min: 0,
            max: 100,
            position: 'bottom',
            grid: {
              color: 'black',
              borderColor: 'black',
              drawBorder: true,
              drawOnChartArea: false,
              drawTicks: false,
            },
            ticks: {
              callback: function(value, index, values) {
                if (value === 0) return null;
                return value;
              }
            }
          },
          y: {
            min: 0,
            max: 70,
            position: 'left',
            grid: {
              color: 'black',
              borderColor: 'black',
              drawBorder: true,
              drawOnChartArea: false,
              drawTicks: false,
            },
            ticks: {
              callback: function(value, index, values) {
                if (value === 0) return '0';
                return value;
              }
            }
          }
        }
      },
    };

    new Chart(ctx, config);
  </script>
</body>
</html>

```

---

<div class="post-metadata">

### Author: ![Alexey\_Khrolovich](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexey_khrolovich/32/37980_2.png) [@Alexey\_Khrolovich](https://community.glideapps.com/u/Alexey_Khrolovich)
#### Post date: [December 6, 2024, 12:36pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/13 "2024-12-06T12:36:44Z")

</div>

Wow… We call them “nocode” community %))

So this opens possibility to set colours or circles myself… i will try!

FYI:  
This chart represents statistic of tenants in one big warehouse. X is their delay of rent, Y is delay of damage elimination, radius is rented area and colour i want to define depending on their rent per m2 from green to red… And the quadrants are:  
-left-bottom - “normal”  
-left-up “warning”  
-right-bottom “warning”  
-right-up -“Unacceptable area!!!”

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [December 6, 2024, 2:07pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/14 "2024-12-06T14:07:53Z")

</div>

> [@Alexey\_Khrolovich](#):
>
> Wow… We call them “nocode” community %))

You happen to stumble over one that has converted from no-code to low-code 😂

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [December 13, 2024, 2:08pm UTC](https://community.glideapps.com/t/custom-element-make-quadrant-chart/78209/15 "2024-12-13T14:08:44Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.