Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 🎯  Solution Guides

  • Low Code Solutions

    Add "Tabs" to your app

    ID Target Link

    Use an address field to display a static street view thumbnail

    Turn your menu into a fixed menu

    Auto close mobile menu

    Display record information in a card

    How to add a back button to your app

    Add a collapsible accordion element to your app

    Code Snippets

    PHP Curl Create New Record

    PHP Get Records With Filters

    Google Scripts - Get record and create new records from connected table

    Save Tables and Fields into Spreadsheet

    Google Scripts - Export all records

    Webhook to save deleted records

    Send Messages to Slack

    Restrict Space and Force Uppercase in a Form

    Building Advanced Features

    Use Validation Rules to Ensure Unique Votes Per User

    Use Record Rules to Create an Audit Log

    Track current inventory with transactions

    Schedule Bookings and Prevent Double Bookings

    Create orders with multiple items and varying quantities

    2 Step Forms

    Unique Record Validation

    Restrict Editing Records to Record Owners

    Sum date/time field

    Duplicate Records

    Advanced App Customization

    How to embed a Tadabase page on another website

    Adding external fonts

    Custom Favicon

    Making apps mobile friendly

    Show date/time as a countdown

    Importing many images at once

    Adding QR Codes

    Adding charts to PDFs

    Customizing your app shortcut for mobile phones

    Animate parts of a page

    Design Customization

    Changing background colors

    Set background colors to the edge of a page

    Change the background of a column

    Add padding around a component

    Using an image as background for a page

    Adding a background image to a row, column, or component

  • Duplicate Connected Records

Categories
🎯 Solution Guides
Advanced App Customiza...
Adding charts to PDFs

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: 

chart-(1).png

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

How did we do ?

Previous Article
Adding QR Codes
Next Article
Customizing your app shortcut for mobile phones
Back to top
API
100% Operational
Apps
100% Operational
Builder
100% Operational
Overall Status
100% Operational