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?
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.
I made generation of link for quickchart.io but its not such beautiful and cant make names right on graph…
Have you tried the AI component?
What do you mean by “can’t make names right on graph”?
i generate link for quickchart.io this is it: https://quickchart.io/chart?c={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}]}]}}
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…
Can you show us an image of that QuickChart URL in your app?
{
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,
},
}
wow.
But i cant reseive same result…
i understand that i must use it same way like this: quickchart.io
But it gives
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.
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?
Please use this in an HTML to URL column, and use Web Embed to display it.
<!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>
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!!!”
You happen to stumble over one that has converted from no-code to low-code 
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.