Working with QuickChart URL parameters

[dbaum]

Here's a small contribution to the existing library of QuickChart tips.

First of all, if you've somehow landed here before seeing the many great tips focused on QuickChart outputs that have been posted by generous community experts, be sure to reference those for helpful guidance:

• Radial Gauge / "Meter" - Inline Dynamic Icon - How... - Google Cloud Community
• Progress Bar Chart ; new static image chart type i... - Google Cloud Community
• New Chart series - Half round gauge chart ; QuickC... - Google Cloud Community
• Using QuickChart in your apps - Google Cloud Community
• Scheduled chart report via Telegram Bot API and Qu... - Google Cloud Community
• QuickChart 101 | Line Graphs - Google Cloud Community

Troubleshoot JSON errors

It's a detailed, often tedious, task to concatenate precisely correctly all the minute elements of the JSON that typically serves as the chart parameter in the URL query. I frequently encounter errors from QuickChart like "Unexpected number" or "Unexpected token". Invariably, the issue is that I provided data as text rather than numbers or omitted a delimiter comma somewhere or overlooked an opening or closing quote mark, bracket, or brace or something similar. As in the following example, the errors cite the character position of the error.

Of course, that number is only helpful if you have a way to find that character position. Here's how to interpret the number and find it in your URL.

• The number that precedes the colon is the line number. In my example, that number is 1.
• The number that follows the colon is the character position within the cited line number. In my example, that number is 853.
• The numbers seem to reference the unencoded value of the chart or c parameter, with the following = sign being character position number 1. So, in a URL like https://quickchart.io/chart?chart=... ignore the initial https://quickchart.io/chart?chart portion in counting characters.
• A quick way to get the unencoded URL is to use URL Decode and Encode - Online. 
  • Working within the app editor, an alternative is to delete the ENCODEURL function from your expression and, without leaving the expression editor, use the Test function. From the Table Data page that's generated, you can copy the unencoded URL and then paste it in a text editing app where you can find the indicated line and character position. Back in the expression editor, just select Cancel to leave your previously saved expression intact, including its ENCODEURL function.

Skip JSON altogether

In a reply to another QuickChart tip, the project's creator called out its great chart maker feature. Although that feature is particularly aligned with AppSheet's no-code approach, I don't see other references to it in the community and fear it's overlooked and underused. Following is an overview. See Automate chart creation with Chart Maker (no code) for a full walkthrough.

• Use QuickChart's straightforward Chart Maker interface to create a chart that will serve as a template.
• Select Save as API Template to get your chart's dedicated API endpoint.
• Use that endpoint along with available parameters to customize the data, labels, and other aspects of your chart on demand. No fragile JSON!