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?
