Map data table to Bubble Chart

1

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',
    },
  },
}")
2

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.

3

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’
}
}
}")