Charting in Thunkable
Setting URL Parameters in Thunkable
Now that we know what URL parameters are, we can start creating blocks in our project to dynamically update the parameters. To do this we'll use the Text blocks, and in particular the Join block, to change out each of our variables.
Overview
To recreate the UI for this app you can add an image and a button - click on the remix button to add the UI and blocks for this project to your Thunkable account.
Block it Out
Drag an image component onto the screen. The chart URL will be used as the image source. The URL should be set in your blocks unless you plan to have a static chart image, in which case you may set the image source on the design screen.
Drag an image component to the screen
Go to your blocks
Following some user or system generated action, set the url for the image component using the Quickchart API base URL provided while saving your chart
All chart updates will be made by appending text
join blocks
to the image source URL.
![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FuFs6dyeL8tYwZalZ8GKA%252FCharting%2520in%2520Thunkable%2520%253E%2520Blocking%2520it%2520out.png%3Falt%3Dmedia%26token%3D8c321990-c643-4805-b1b7-1fee36f0d8dd&width=768&dpr=4&quality=100&sign=64a7c58b&sv=1)
Use the no-code chart API
Currently, three aspects of your chart can be overriden with custom values:
Chart title
Dataset labels
Data
These customizations are passed as URL parameters. For example, to override chart title, take the base URL and add the following:
![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FBrOB5s8PpQhIl4IKIr9j%252FCharting%2520in%2520Thunkable%2520%253E%2520use%2520no%2520code%25201.png%3Falt%3Dmedia%26token%3D75151e2c-d436-4e5e-8731-94e12cdfa62f&width=768&dpr=4&quality=100&sign=be2aa866&sv=1)
You can join URL parameters together using the & symbol. For example:
![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252F2ksueiMJchILlzGa6Eni%252FCharting%2520in%2520Thunkable%2520%253E%2520use%2520no%2520code%25202.png%3Falt%3Dmedia%26token%3D25ff45f6-4a3b-4936-b3ba-b37bd6522095&width=768&dpr=4&quality=100&sign=9f22bed0&sv=1)
To override data, use data1, data2, data3, …, for each dataset on the chart.
For example, to override the first (primary) dataset:
![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FyfUTs5Nu4O6jV0vAVxXZ%252FCharting%2520in%2520Thunkable%2520%253E%2520use%2520no%2520code%25203.png%3Falt%3Dmedia%26token%3D7888ed10-3920-4176-9aa7-1e2fe29e10c7&width=768&dpr=4&quality=100&sign=5639429e&sv=1)
To override multiple datasets and the chart title:
![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FIeZmxxQCAGfjHEE4RR9v%252FCharting%2520in%2520Thunkable%2520%253E%2520use%2520no%2520code%25204.png%3Falt%3Dmedia%26token%3Da19f429b-7ccc-4ae7-8fbb-e450b7e724d6&width=768&dpr=4&quality=100&sign=d45cf5f1&sv=1)
Last updated