Hi everyone. Is there any way to change the design of the Charts for example colours on the pie chart? I watched some old tutorial videos and there appears to have been an option for changing the colour theme in the past but it’s removed now?
I’ve tried looking at QuickChart but I can’t get anywhere with that. I don’t understand Json and I’m using platforms like Glide so I never have to. Unless there’s a way of integrating it into Glide that I’m unaware of?
Any help appreciated.
No, I’m afraid not.
Yes, that was an option with the old Classic Apps. It’s not been made available with the new Apps, and I don’t know if there are any plans to provide additional styling options with charts.
Quickcharts is the best choice if you need more than Glide gives out of the box. There is a little bit of a learning curve, but it isn’t that difficult. The quickcharts sandbox editor is great place to experiment. Once you get a chart looking the way you want there, you can just about copy/paste the JSON into a Glide template column and you’re most of the way there.
Oh, and the other option with Quickcharts is the Template Maker. This gives you an interface that allows you to design a chart without having to mess around with the JSON structure. You can then save it as a template, and you’ll be given a URL that you can use directly in a Glide Image component. It isn’t as customisable, but a good option if you just want a basic chart with a few options.
Hi Darren
Thank you for getting back to me. I’ve created a chart using Quickchart that I’m happy with, I’ve added a template column in my data and copy pasted it in. Now how do I get that to appear in my layout?
Even if I went the second option you said via a template maker, what steps do I take to add it via an image component? I can’t see an option to paste a url.
Sure.
Let’s use the sandbox chart that I linked to earlier as an example.
The JSON for that one looks like so:
{
type: 'pie',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{ data: [50, 60, 70, 180, 190] }],
},
}
The two parts of the chart that we want to be dynamic are the labels and the data. Each of those expects a list of values, enclosed in square brackets. eg: the labels are 'January', 'February', 'March', 'April', 'May'
So when we use that JSON to create a template, we want to use placeholders for those two sections so that we can replace them with our own data. So the Glide template we want to create should look like so:
{
type: 'pie',
data: {
labels: [{labels}],
datasets: [{ data: [{data}] }],
},
}
In the above, we will replace {labels} with a list of our labels, and {data} with a list of corresponding values. One thing to note is that any text values (eg. the labels) must be quoted with either single or double quotes (either is okay).
Imagine we have a table that looks like the below, and we want to put that in a pie chart:
We need to create two lists, one for the labels and one for the data. The way to do that is with a Joined List column. However before doing that, we need to add single quotes to the labels using a template column. To do that, just use something like '{label}' in a template column and replace {label} with the value from the column to be used as the label. Once that is done, we can create two joined list columns using the default comma separator:
The next thing is to plug those two lists into a template column with the JSON:
If you’ve done everything correctly to this point, you should be able to copy the output of the above template column and paste it into the quickchart sandbox editor, and it should render your chart.
The next step is to generate a URL that can be used with an Image component. It’s best to use a Construct URL column for this, as it will ensure that everything is properly URL encoded. Configure it as follows:
You can then use that column as the source of an image component in your layout:
Thank you again Darren for the effort you’ve put into your reply.
I followed this but got the following error.
This is my data. I’m trying to create a basic income/expenses budget planner.
The chart I want to create will do a total of the income/expenses for a weekly period which falls under the column titled value. I was trying to create a total based on income or expense defined in the type column.
I’m not sure if a joined list data is the right way of doing this because it’s picking up each row rather than a total which might be impacting the chart because there are more data sets than labels? I’m not sure. I was thinking another table might be needed but I couldn’t work out how to get cell value from one table to repeat on another table.
This is the steps I’ve taken based on your guide above:
Okay, no worries.
First of all, looking at your screen shots my guess is that the error comes from the fact that you are passing the values as unquoted strings instead of numbers. For example, when you pass $1,250.00 that will be interpreted as a string value. You would need to strip the formatting out of that and just pass the raw value, eg: 1250.00
If you can paste the output of your template column, I can help confirm if that is the problem.
As to how your data is arranged, if I understand correctly, your pie chart should just have two slices, yes? One for Income and another for Expenses?
Assuming that’s correct, then what you can do is create a separate table with just two rows. Add a column for type and put Income in the first row and Expense in the second row. Then add a multiple relation column that matches the Type to the Type column in your other table. You can then add rollups through the relation to sum the values for all rows in the original table. From there, you could carry on as per my previous steps.
Okay so first I did the latter part which was create a new table.
And I believe I’ve followed the other steps correctly.
But now I can’t find this column when I try to add an image. It’s now showing 4 text only columns whereas before I could see every column across all tables. Is this a bug?
Looks like your screen is attached to a different table.
Add a Single Value column to that table and target the first row → chart URL column in the new table. Then use that single value column as the source of the image.
We’re getting closer. I have the chart displayed but it’s only recognising the first row.
I might need some more screen shots, but I think you might be missing the Joined List column to feed into the JSON template. Your earlier screen shot indicated you are using the Totals (rollup) column, which would only give you the first row. You need to add a Joined List column that targets the Totals column, and use that in your template to replace {data}.
There it is, you magnificently beautiful person you! Thank you.
haha, finally! 
