Tips for using url images in templates

[Taylor_Felt2]

I’m having a lot of trouble adding an image from quickcharts into a google word doc template. I have only gotten this to work with snapshot() but it does not look good with the app background. I’ve also tried it as a thumbnail and JSON workflow. Any suggestions?

[Taylor_Felt2 · Accepted solution]

If anyone else is having this issue with quickcharts or any other url image using JSON, you’ll need to clean up the code. I used this site https://www.nousphere.net/cleanspecial.php. I’m sure there are better ones out there. Click html (even though it’s json) it will remove any spaces that are causing the issue. My pdf template now shows all the charts in the app.

[Felipe_Engelber]

Thanks for sharing the cleaning information, currently I have a quickchart url stored in a Virtual column called Graph 1 I did the cleaning of my quickchart url image but it is still not showing in the output pdf from the template
I am calling the graph like this in the report:
<<[Graph 1]>>
But it doesn’t seems to work, do you have suggestions?

Thanks again!

[Taylor_Felt2]

I’m not sure, can you post the expression.

[LeventK]

@Taylor_Felt2
You don’t need an external service for that. Below expression will always works:

CONCATENATE(
	"https://quickchart.io/chart?c=",
	ENCODEURL(
		CONCATENATE(
			"{type:'radialGauge',data:{datasets:[{data:[",
			NUMBER([Offset Percentage]*100),
			"],backgroundColor:'red'}]},options:{trackColor: 'rgb(224, 224, 22)',centerPercentage: 70,roundedCorners: false,centerArea:{text:' ",
			NUMBER([Offset Percentage]*100),
			"%'}}}"
		)
	)
)

[Taylor_Felt2]

LeventK:

CONCATENATE(
	"https://quickchart.io/chart?c=",
	ENCODEURL(
		CONCATENATE(
			"{type:'radialGauge',data:{datasets:[{data:[",
			NUMBER([Offset Percentage]*100),
			"],backgroundColor:'red'}]},options:{trackColor: 'rgb(224, 224, 22)',centerPercentage: 70,roundedCorners: false,centerArea:{text:' ",
			NUMBER([Offset Percentage]*100),
			"%'}}}"
		)
	)
)

That expression did work in the app but did not render on the template. I had to remove white spaces for it to render properly.

[Bahbus]

Yes, in a template you would need to remove whitespaces as the HTML converting service almost definitely inserts code there.

In app, its just much easier to read.

[LeventK]

@Taylor_Felt2
ENCODEURL(), encodes the text to be fit for HTML. It replaces spaces with either %20 or with + sign so that the HTML engine can render it.
Here is the evaluation of the expression I have given above:

https://quickchart.io/chart?c=%7Btype%3A%27radialGauge%27%2Cdata%3A%7Bdatasets%3A%5B%7Bdata%3A%5B67%5D%2CbackgroundColor%3A%27red%27%7D%5D%7D%2Coptions%3A%7BtrackColor%3A%20%27rgb%28224%2C%20224%2C%2022%29%27%2CcenterPercentage%3A%2070%2CroundedCorners%3A%20false%2CcenterArea%3A%7Btext%3A%2767%25%27%7D%7D%7D

if you copy&paste this expression to your browser, you will see that it’s rendered correctly.