Craft amazing charts with Typeform and Quickchart
Hi, I’m Baptiste from Agent Studio. I’d love to share how I figured out how to create stunning charts from Typeform responses.
Hopefully, it can spark some ideas.
Challenge
I recently had to build an automation for a client to generate some beautiful spider charts within a report. After doing some research, I found that making beautiful spider graphs is tricky!
I tested different options, including Google Sheets and Slide, Looker, and Docmaker. Nothing was complying with the needs and aesthetic standards of my client.
Until I found quickchart.io! This was the missing part of my automation.
What we’ll build
The goal is to build a PDF report containing a spider graph showing scores.
The use case is a short Skills Assessment survey: the candidate will rate themselves on a few skills and receive a report summarizing their skills.
👉 In this article, I will show you the automation to generate this PDF report integrating a Spider Graph using data from Typeform responses.
Here is what the report looks like:
Let’s dive in! 🤿
Overview
Here is a simplified workflow of what we’ll build.
Tools
First, let’s review the tools and prepare the material we need.
Typeform
The form starts with 2 general questions — name and email, then followed by 10 questions organized by skills in Question Groups. Each question is an opinion scale from 1–5.
Google Sheets
In Google Sheets, I’ve created a working sheet with a recap section containing the average score for each skill and the name of the person taking the survey.
This working sheet will be duplicated with each new survey, where responses will be added in order to calculate the scores.
In the end, we end up with a recap board like this one.
Quickchart.io
Quickchart.io is the cornerstone of this automation.
Their graph maker is great: you can customize everything you need and their Chart Assistant is very powerful (from text to graph creation in no time). Each generated graph has its own unique URL that lets you integrate it anywhere you want.
But their spider graph design is pretty basic and it didn’t meet my client’s aesthetic expectations. I had initially discarded it, but then realized they had an option to display the graph without the axes. I could then add the chart on top of a background image. Here was my solution! 🚀
Using their maker tool, I created the graph as needed. It lets you customize the layout and define the sample data you will integrate.
Tip: you can hide the background image by toggling the Axes selector.
When happy with the result, you can save the template and store the unique URL with the button “Save as API Template”.
We will reuse this URL in the automation.
Google Docs & Graph background image
As I mentioned earlier, we would display the Quickchart graph on top of an image. So I created a nice background image using Figma and a Google Docs template to display the result.
The document has to be created using variables that will be replaced by Make in the automation.
Text can be replaced using variables. These variables use the following syntax: {{variable}}
Image is actually trickier. You can both replace a text variable or an actual image. I chose to replace an image as it was easier and for a second important reason: I could make sure the images were aligned.
1. I generated a graph with the values 0, 1, 2, 3, 5
2. Then I scaled and aligned this temporary graph with the background image (this is actually the most cumbersome task using Google Docs 🤦)
3. Finally, I needed to get the objectID of the image to replace.
Tip: you can do it with Make using the “Get Content of a document” action (you can confirm it is the right object with the contentUrl nested in positionnedObjects).
Here is how the template looks like:
{{variables}} and placeholder imageMake
Make.com is a great automation builder: powerful, cheap, easy to use and compatible with tons of apps and actions. I use it in most automation flows.
The flow
Hopefully, you’ve followed me up to here. Here is the part where everything comes together.
Let me explain a little bit each step:
1. Typeform (watch responses — Instant): this is triggered directly as data is submitted. You get all the values from your Typeform.
2. Duplicate the template calculation sheet: this is the working sheet where you calculate the scores. You need this sheet to create the recap independently from other responses. Bonus: it also makes it easier for you to check results if you need to.
3. Map the values from Typeform to your working sheet. You’ll have to add the mapped data from Typeform one by one to each column. Then, as your working sheet is set up with formulas, Google Sheets will “copy-paste” your data to be calculated.
4. Get the recap calculated values: you can fetch the 2nd column only.
5. Create an array with the recap values
6. Generate the chart: set chart values using the values from the previous step. You’ll have to map the data map(array; 0)) and the Quickchart unique URL.
7. Create a Google Docs from the template and replace the text and image variables (all in one step 🙌) Use the {{variable}} and the objectID of the image to replace.
8. Download the file as PDF: using the Google Drive node.
9. Send it to the user via email: use the Gmail action to send the report (as an attachment).
10. Rename and hide the sheet: you can do it through an API call (more info here). For reference, here is my body request:
{
"requests": [
{
"updateSheetProperties": {
"properties": {
"sheetId": "{{sheetId}}",
"title": "{{sheetTitle}}",
“hidden": true
},
"fields": "title,hidden"
}
}
]
}Conclusion
That’s it. You can test your workflow and schedule it now! 🚀
From here, there are many possibilities to explore. For instance, my next challenge will probably be to let multiple people answer a survey and generate a unique report with aggregated values.
I hope it will give you ideas to build even better reports or products with Typeform and Quickchart.
Do let me know if you have any questions. Please, share it in the comments if you’re stuck or to let us know what cool thing you’ve built!
