Quick Chart

AppSheet AppSheet Q&A
, , , ,
1

Hi please guide me how can connect this chart to my Gsheet

Sirfyaad_0-1707409531276.png
Sirfyaad_0-1707409531276.png1000×600 178 KB

{
type: ‘bar’,
data: {
labels: [
‘January’,
‘February’,
‘March’,
‘April’,
‘May’,
‘June’,
‘July’,
‘August’,
‘September’,
‘October’,
‘November’,
‘December’,
],
datasets: [
{
label: ‘Triangles’,
data: [
{ x: ‘January’, y: 30, label: ‘10%’ },
{ x: ‘February’, y: 21, label: ‘11%’ },
{ x: ‘March’, y: 22, label: ‘12%’ },
{ x: ‘April’, y: 43, label: ‘13%’ },
{ x: ‘May’, y: 24, label: ‘-14%’ },
{ x: ‘June’, y: 25, label: ‘15%’ },
{ x: ‘July’, y: 26, label: ‘-16%’ },
{ x: ‘August’, y: 27, label: ‘17%’ },
{ x: ‘September’, y: 28, label: ‘-18%’ },
{ x: ‘October’, y: 29, label: ‘19%’ },
{ x: ‘November’, y: 30, label: ‘-20%’ },
{ x: ‘December’, y: 31, label: ‘21%’ },
],
type: ‘line’,
fill: false,
borderColor: ‘transparent’,
borderWidth: 0,
pointStyle: ‘triangle’,
pointRadius: 8,
pointBackgroundColor: function (context) {
return context.raw.label[0] === ‘-’ ? ‘#01b050’ : ‘#ff0101’;
},
pointRotation: function (context) {
return context.raw.label[0] === ‘-’ ? 180 : 0;
},
},
{
label: ‘Bars’,
data: [20, 11, 12, 33, 14, 15, 16, 17, 18, 19, 20, 21],
backgroundColor: [
‘#01b050’,
‘#ffc000’,
‘#ff0101’,
‘#01b050’,
‘#ffc000’,
‘#ff0101’,
‘#01b050’,
‘#ffc000’,
‘#ff0101’,
‘#01b050’,
‘#ffc000’,
‘#ff0101’,
],
borderColor: ‘transparent’,
borderWidth: 1,
},
{
label: ‘Line’,
data: [30, 31, 32, 33, 34, 35, 36, 39, 40, 41, 42, 43],
type: ‘line’,
fill: ‘origin’,
backgroundColor: ‘#e9f6dc’,
borderColor: ‘#ccc’,
borderWidth: 1,
borderDash: [5, 5],
pointRadius: 0,
xAxisID: ‘x1’,
},
],
},
options: {
scales: {
x: {
grid: {
display: false,
},
ticks: {
maxRotation: 90,
minRotation: 90,
},
},
x1: {
display: false,
offset: false,
},
y: {
min: 0,
max: 100,
grid: {
borderDash: [5, 5],
},
ticks: {
stepSize: 20,
callback: function (value) {
return value + ‘%’;
},
font: {
weight: ‘bold’,
},
},
},
},
plugins: {
legend: {
display: false,
},
datalabels: {
display: function (context) {
return context.datasetIndex === 0 || context.datasetIndex === 1;
},
formatter: function (value, context) {
return context.datasetIndex === 0 ? value.label : value + ‘%’;
},
anchor: function (context) {
return context.datasetIndex === 0 ? ‘end’ : ‘center’;
},
align: function (context) {
return context.datasetIndex === 0 ? ‘end’ : ‘center’;
},
color: function (context) {
if (context.datasetIndex === 1) {
// White text for bars with green background.
return context.dataset.backgroundColor[context.dataIndex] ===
‘#01b050’
? ‘#fff’
: ‘#000’;
}
},
offset: -4,
},
},
},
}

1 Like
2

QuickChart.io is an incredibly powerful and versatile charting service. I’ve got a series of videos that will walk you through the various steps needed to make something like this work in your app.

Once you figure out how to create a line graph with your app’s data, changing the line to a different style is fairly straight-forward - so I advise you start there.

3 Likes
3

@Sirfyaad I can’t complete with @MultiTech 's detailed video explanations but, nonetheless, as a sort of supplement to those explanations, you may be interested in a little template (sample) app I made that demonstrates a very basic way to use QuickChart in an app (the link to the template app is in the following post):

https://www.googlecloudcommunity.com/gc/Tips-Tricks/Using-QuickChart-in-your-apps/m-p/255189

Note that this and all of the usages I’m familiar with in AppSheet do not connect QuickChart to your Gsheet but, rather, show the QuickChart result as in image in your AppSheet app. I sometimes have my AppSheet app write the QuickChart URL to my spreadsheet but the display occurs in AppSheet as an image.