How to create charts with Zapier

It’s a common pattern to want to create a chart based on some data you’re manipulating in Zapier. Usually after creating the chart, you’ll do something like embed it in a document, upload it to a drive, or send it in an email.

This tutorial describes how to create a chart based on data in Zapier, and how to embed the chart in an email.

In this example, we’ll use the QuickChart Zapier integration to generate customized charts. As an example data source, we’ll use a Typeform survey, but you can use any data source you want in Zapier! Other examples of data sources our users connect include Google Sheets, Airtable, and CRMs like Salesforce.

Zapier has built-in email capabilities that we’ll use to embed the chart and send the email whenever new data comes in.

Configure the trigger

In this example, we’re using Zapier’s Typeform integration as a trigger, but you can use any trigger you want. Alternatives include Google Forms, Google Sheets, Airtable, and SurveyMonkey.

After adding the trigger, you’ll be prompted to choose the event and an account. Then, search for the form by name. Modifications to this form will trigger the zap.


Sign into your Typeform account in Zapier.

Next, find the survey in your Typeform account. You can search by survey name.


Select the survey that you want to generate charts for.

Once this is done, press “Continue”. You may then test the trigger.

Create the Chart action in Zapier

Now you’re ready to actually create the chart. We’ll do this using the QuickChart action, which generates a chart iimage URL that in Zapier.

Start by searching for “QuickChart” in the actions search.


Search and add the QuickChart Zapier action.

You’ll be prompted for login, but it’s not required. If you’re asked for an API key or email address, enter your email or leave it blank.

Set up the chart configuration

Now for the most important part: we’re going to set up the chart configuration. This Zapier action uses Chart.js, a free and open-source chart specification.

In this example, we’re going to create a radar chart. However, other common use cases include bar charts, radial gauges, and polar area charts. There are a wide variety of charts that you can use. See the documentation to learn how to build a chart!

Once you’ve got your chart configuration, paste it into the action setup on Zapier and substitute the data variables:


Chart configuration in Zapier action setup.

Proceed by clicking “Continue” and then running a test.


Testing the Zapier chart generation.

The results should look similar to above. The action outputs a URL. Going to this URL will load a chart image.

Alternative: Choose a built-in configuration

If you just want a simple chart, there are some built-in chart types that you can use to avoid having to create a JSON configuration. However, if you want the full range of chart customization, you’ll have to construct a configuration yourself as described above (it’s not so bad!).


Some of the built-in chart types.

Alternative: Use the chart maker

A second way to avoid editing configurations by hand is to use the chart maker, a no-code tool to construct charts.

After obtaining a template URL from the chart maker, you can construct a URL that alters the chart to your liking without having to use the QuickChart action on Zapier.

Adding the chart to email

Now that we’ve generated a chart, it’s time to actually do something with it! In this example, we’re going to send an email.

Zapier has a built-in “Send Outbound Email” action. Let’s search for this action and select it.

In the action setup form, there are two ways to include a chart in the email:

  1. To include it as an email attachment, enter the Chart URL in the Attachment field.

  2. To embed it in the body of the email, use this special HTML:

<div>
  <img width="500" src="Chart URL">
</div>

In this screenshot, the Send Outbound Email action is configured to both attach the chart as well as embed it directly in the email:


Emailing a chart via Zapier.

Click “Continue” and “Test & Review”, and soon you’ll have an email in your inbox!


Emailing a chart via Zapier.

Conclusion

In this article, we learned how to create a chart from data in Zapier. Although we sent this chart in an email, the same technique could just as easily be applied to:

  • Adding a chart to a Google Drive or Google Doc
  • Sending the chart as a Slack message
  • Tweeting the chart

Because the chart is simply a URL, any action that accepts a URL can work with this approach.

Please feel free to reach out with any new ideas or questions! Also, if you need help, check out our community where we discuss QuickChart integrations, chart configurations, and more.


Ian Webster

About the author

Ian Webster is a software engineer and former Googler based in San Mateo, California. He has helped Google, NASA, and governments around the world improve their data pipelines and visualizations. In 2018, Ian created QuickChart, a collection of open-source APIs that support data visualization efforts.

Email · LinkedIn · Twitter