Charts on PDF's

Adding Charts to PDF's

At this time PDF's don't support charts, however, in some instances you can make use of the Google Charts Image API to create simple charts on the fly. 

Learn more about Google Charts API here: https://developers.google.com/chart/image/docs/making_charts

This is a workaround until we roll out a full charts solution. The Google Image Chart API is depreciated and can stop working at any point. 

Using app variables inside the HTML component of a PDF, you can create simple chart. 

Here's an example: 

If we're adding a PDF to view all the tasks for a specific project, we can add some Count fields which will count the total number of tasks per priority or status. 

Essentially we'll have 3 fields: 

 

Within each field we've added conditions to only count the connected tasks based on their status. For example: 

We 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 paramater in the URL must be seperated 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 seperate it with a comma
    chd=t:{Urgent Tasks},{Important Tasks},{Low Tasks}
  5. Again, we must separate the next paramter 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

When we combine this URL and add this 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"/>

Here you can see an example of this chart will appear: 

chart-(1).png

Final Notes

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

This is not supported by Tadabase and the Tadabase support team can not assist with creating charts using the Google API. This has been added here as a simple pointer since we've gotten many requests on adding charts.