Appsheet with Quickchart integration

[jazz59]

Hi everyone.

I created a table in Appsheet with its data source being a Google sheets spreadsheet; meanwhile, I created an appsheet database from that table. The idea is that any changes to the original spreadsheet to be also translated into this new appsheet's database.

I've been trying to integrate Quickchart with this database. My idea is to build a chart (linear type, as in the picture) that dynamically updates whenever new data gets added (to the spreadsheet, therefore to the database).  I could do it by sharing my spreadsheet with quickchart, but I want it to be independent from Google sheets (as access to spreadsheet must be restricted by password). Uploaded images show my 1) database, 2) the chart I built by sharing my spreadsheet, and 3) the  chart I'm actually getting by using this formula:

concatenate("https://quickchart.io/chart?width=500&height=300&bkg='rgba(29, 29, 29, 1)'&c=",
ENCODEURL("
{
type: 'line',
data: {
datasets: [
{
fill: true,
spanGaps: false,
lineTension: 0.4,
pointRadius: 3,
pointHoverRadius: 3,
pointStyle: 'circle',
borderDash: [0, 0],
barPercentage: 0.9,
categoryPercentage: 0.8,
data: [',[ACD],'],
type: 'line',
label: 'ACD',
borderColor: '#4E79A7',
backgroundColor: '#4E79A733',
borderWidth: 3,
hidden: false,
},
{
fill: true,
spanGaps: false,
lineTension: 0.4,
pointRadius: 3,
pointHoverRadius: 3,
pointStyle: 'circle',
borderDash: [0, 0],
barPercentage: 0.9,
categoryPercentage: 0.8,
data: [',[TM],'],
type: 'line',
label: 'TM',
borderColor: '#F28E2B',
backgroundColor: '#F28E2B33',
borderWidth: 3,
hidden: false,
},
{
fill: true,
spanGaps: false,
lineTension: 0.4,
pointRadius: 3,
pointHoverRadius: 3,
pointStyle: 'circle',
borderDash: [0, 0],
barPercentage: 0.9,
categoryPercentage: 0.8,
data: [',[A±S],'],
type: 'line',
label: 'A±S',
borderColor: '#76B7B2',
backgroundColor: '#76B7B233',
borderWidth: 3,
hidden: false,
},
{
fill: true,
spanGaps: false,
lineTension: 0.4,
pointRadius: 3,
pointHoverRadius: 3,
pointStyle: 'circle',
borderDash: [0, 0],
barPercentage: 0.9,
categoryPercentage: 0.8,
data: [',[TEA],'],
type: 'line',
label: 'TEA',
borderColor: '#E15759',
backgroundColor: '#E1575933',
borderWidth: 3,
hidden: false,
},
],
labels: [
{
data: [',[Data],'],
label: '',
},
],
},
options: {
title: {
display: false,
position: 'top',
fontSize: 12,
fontFamily: 'sans-serif',
fontColor: '#666666',
fontStyle: 'bold',
padding: 10,
lineHeight: 1.2,
text: 'Chart title',
},
layout: {
padding: {
bottom: 5,
top: 5,
left: 5,
right: 30,
},
left: 0,
right: 0,
top: 0,
bottom: 0,
},
legend: {
display: true,
position: 'top',
align: 'center',
fullWidth: true,
reverse: false,
labels: {
fontSize: 12,
fontFamily: 'sans-serif',
fontColor: '#aeaeae',
fontStyle: 'bold',
padding: 20,
},
},
scales: {
xAxes: [
{
id: 'X1',
display: true,
position: 'bottom',
type: 'category',
stacked: false,
offset: false,
time: {
unit: false,
stepSize: 1,
displayFormats: {
millisecond: 'h:mm:ss.SSS a',
second: 'h:mm:ss a',
minute: 'h:mm a',
hour: 'hA',
day: 'MMM D',
week: 'll',
month: 'MMM YYYY',
quarter: '[Q]Q - YYYY',
year: 'YYYY',
},
},
distribution: 'linear',
gridLines: {
display: true,
color: '#BDC1C617',
borderDash: [4, 4],
lineWidth: 1,
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
tickMarkLength: 10,
zeroLineWidth: 1,
zeroLineColor: 'rgba(0, 0, 0, 0.25)',
zeroLineBorderDash: [0, 0],
},
angleLines: {
display: true,
color: 'rgba(0, 0, 0, 0.1)',
borderDash: [0, 0],
lineWidth: 1,
},
pointLabels: {
display: true,
fontColor: '#666',
fontSize: 10,
fontStyle: 'normal',
},
ticks: {
display: true,
fontSize: 12,
fontFamily: 'sans-serif',
fontColor: '#BDC1C6',
fontStyle: 'normal',
padding: 3,
stepSize: null,
minRotation: 0,
maxRotation: 50,
mirror: false,
reverse: false,
},
scaleLabel: {
display: false,
labelString: 'Axis label',
lineHeight: 1.2,
fontColor: '#666666',
fontFamily: 'sans-serif',
fontSize: 12,
fontStyle: 'normal',
padding: 4,
},
},
],
yAxes: [
{
id: 'Y1',
display: true,
position: 'left',
type: 'linear',
stacked: false,
offset: false,
time: {
unit: false,
stepSize: 1,
displayFormats: {
millisecond: 'h:mm:ss.SSS a',
second: 'h:mm:ss a',
minute: 'h:mm a',
hour: 'hA',
day: 'MMM D',
week: 'll',
month: 'MMM YYYY',
quarter: '[Q]Q - YYYY',
year: 'YYYY',
},
},
distribution: 'linear',
gridLines: {
display: true,
color: '#BDC1C617',
borderDash: [4, 4],
lineWidth: 1,
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
tickMarkLength: 10,
zeroLineWidth: 1,
zeroLineColor: 'rgba(0, 0, 0, 0.25)',
zeroLineBorderDash: [0, 0],
},
angleLines: {
display: true,
color: 'rgba(0, 0, 0, 0.1)',
borderDash: [0, 0],
lineWidth: 1,
},
pointLabels: {
display: true,
fontColor: '#666',
fontSize: 10,
fontStyle: 'normal',
},
ticks: {
display: true,
fontSize: 12,
fontFamily: 'sans-serif',
fontColor: '#BDC1C6',
fontStyle: 'normal',
padding: 3,
stepSize: null,
minRotation: 0,
maxRotation: 50,
mirror: false,
reverse: false,
},
scaleLabel: {
display: false,
labelString: 'Axis label',
lineHeight: 1.2,
fontColor: '#666666',
fontFamily: 'sans-serif',
fontSize: 12,
fontStyle: 'normal',
padding: 4,
},
},
],
},
plugins: {
datalabels: {
display: false,
align: 'center',
anchor: 'center',
backgroundColor: '#eee',
borderColor: '#ddd',
borderRadius: 6,
borderWidth: 1,
padding: 4,
color: '#666666',
font: {
family: 'sans-serif',
size: 10,
style: 'normal',
},
},
datalabelsZAxis: {
enabled: false,
},
},
cutoutPercentage: 50,
rotation: -1.5707963267948966,
circumference: 6.283185307179586,
startAngle: -1.5707963267948966,
},
}"))

Could anyone help me sorting this out?
Thank you all.

1. database2. chart by sharing spreadsheet3. chart with appsheet formula