Map data table to Bubble Chart

I have a bubble chart I am trying to embed into a PowerApp page where I have a Value Score (X) and an Effort Score (Y) broken up by Epic IDs within “Table1”. When I select the image and embed this code, nothing appears. Not sure what I am doing wrong. Note I dont want to hardcode this as we will add new Epics and I would like their X and Y value to prepopulate the chart.

"https://quickchart.io/chart?c="&EncodeUrl("{
  type: 'bubble',
  data: {
    datasets: [
      {
        label: ["&Concat(Table1,"'"&EpicID&"',")&"],
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
        borderColor: 'rgb(255, 99, 132)',
        borderWidth: 1,
        data: [
          {
            x: ["&Concat(Table1,"'"&'Value Score'&"',")&"],
            y: ["&Concat(Table1,"'"&'Effort Score'&"',")&"],
            r: 7.4,
          },
        ],
      },
    ],
  },
  options: {
    title: {
      display: true,
      text: 'Chart.js Bubble Chart',
    },
  },
}")

Hi @supahman,

Do you have an example of the fully constructed URL that is outputted by the page? That will help me figure out what’s wrong in the URL construction.

Yes. Per the instructions I am trying to replace the json code:

{
type: ‘bubble’,
data: {
datasets: [
{
label: ‘My First dataset’,
backgroundColor: ‘rgba(255, 99, 132, 0.5)’,
borderColor: ‘rgb(255, 99, 132)’,
borderWidth: 1,
data: [
{
x: 62,
y: 94,
r: 9.8,
},
{
x: -62,
y: -34,
r: 7.4,
},
{
x: 8,
y: 60,
r: 1.8,
},
{
x: -44,
y: 59,
r: 9.4,
},
{
x: 64,
y: 46,
r: 6.8,
},
{
x: 16,
y: -95,
r: 10.8,
},
{
x: 95,
y: -80,
r: 1.8,
},
],
},
{
label: ‘My Second dataset’,
backgroundColor: ‘rgba(255, 159, 64, 0.5)’,
borderColor: ‘rgb(255, 159, 64)’,
borderWidth: 1,
data: [
{
x: -15,
y: -28,
r: 14.8,
},
{
x: -31,
y: -53,
r: 11,
},
{
x: -70,
y: -74,
r: 14,
},
{
x: -48,
y: -6,
r: 7,
},
{
x: -82,
y: 34,
r: 13.6,
},
{
x: -89,
y: -71,
r: 16.8,
},
{
x: 15,
y: -38,
r: 0.2,
},
],
},
],
},
options: {
title: {
display: true,
text: ‘Chart.js Bubble Chart’,
},
},
}

Where the X and Y are using the data source from Table 1 where Epic ID will be each bubble, ‘Value Score’ is the X value and ‘Effort Score’ is the Y value.

It works when I do a bar graph but I need a bubble chart for the request:

https://quickchart.io/chart?c="&EncodeUrl("{
‘type’: ‘horizontalBar’,
‘data’: {
‘labels’: [”&Concat(Table1,"’"&EpicID&"’,")&"],
‘datasets’: [
{
‘label’: ‘Dataset 2’,
‘backgroundColor’: ‘rgba(54, 162, 235, 0.5)’,
‘borderColor’: ‘rgb(54, 162, 235)’,
‘borderWidth’: 1,
‘data’: ["&Concat(Table1,"’"&‘Value Score’&"’,")&"]
}
]
},
‘options’: {
‘elements’: {
‘rectangle’: {
‘borderWidth’: 2
}
},
‘responsive’: true,
‘legend’: {
‘display’: false
},
‘title’: {
‘display’: true,
‘text’: ‘Sales Amount by Salesperson’
}
}
}")