Adding charts to PDFs

At this time, PDFs do not support charts. However, as a workaround until Tadabase releases official PDF chart support, you can in some instances use Google Charts Image API to create simple charts on the fly and add them to your PDFs. 

Please keep in mind that the Google Image Chart API is depreciated and can stop working at any point. While Tadabase provides this article as a courtesy to share a workaround for adding charts to PDFs, this is not a permanently reliable solution and can not be supported by Tadabase customer support. We appreciate your patience as we develop our internal solution to PDF charts that will be natively supported and backed by customer support.

You may click here to learn more about Google Charts API: https://developers.google.com/chart/image/docs/making_charts

Let's walk through how to use Google Charts Image API to create a simple chart and add it to your PDF.

Say you have a PDF to view all the tasks of a specific project for each employee and you would like to add a chart to count the total number of tasks per priority. 

To count the total number of tasks per priority, you need three Complex Formula fields:

Within each field you need to add a condition to only count the connected tasks based on their priority:

Once you have your count fields, you can now construct the URL:

https://chart.googleapis.com/chart?
cht=p
	&
chd=t:{Urgent Tasks},{Important Tasks},{Low Tasks}
	&
chs=250x250
	&
chdl=Urgent|Important|Low

Let's unpack this URL: 

1. The first part of the URL is simply calling the Google Chart API:
   https://chart.googleapis.com/chart?
2. Next, we choose the type of chart we want to use: 
   cht=p
3. Each parameter in the URL must be separated by a "&", however since we'll be using this in the IMG Src we must use this instead:
   &
4. Next, we retrieve each value from the database and separate it with a comma
   chd=t:{Urgent Tasks},{Important Tasks},{Low Tasks}
5. Again, we must separate the next parameter with a "&" 
   &

6. Next, we add the chart dimension:

   chs=250x250
7. Again, separate the next parameter 
   &
8. Finally (optionally) we add the legends for each item:
   chdl=Urgent|Important|Low

Combine this URL and add it into the HTML component with the image tag: 

<img src="https://chart.googleapis.com/chart?cht=p&amp;chd=t:{Urgent Tasks},{Important Tasks},{Low Tasks}&amp;chs=250x250&amp;chdl=Urgent|Important|Low"/>

As a result, the following chart will appear: 

You can test this by adding actual values instead of app variables and pasting the URL in the address bar. 

Don't forget to change the %amp; to &

For example: 
https://chart.googleapis.com/chart?cht=p&chd=t:9,14,3&chs=250x250&chdl=Urgent|Important|Low