- 07 Jun 2021
- DarkLight
- PDF
Add Charts to Automation Adaptive Cards
- Updated on 07 Jun 2021
- DarkLight
- PDF
Add Charts to Automation Adaptive Cards Using QuickChart
QuickChart is an API for programmatically rendering charts and graphs. This allows us to embed charts in our Teamwork Automation messages. To make a chart all you need to do to consume it is construct a url that looks like the following:
https://quickchart.io/chart?c={type:'bar',data:{labels:['Q1','Q2','Q3','Q4'], datasets:[{label:'Users',data:[50,60,70,180]},{label:'Revenue',data:[100,200,300,400]}]}}
Which yields the following image:
Adding to Teamwork Automation
To add a QuickChart to a Teamwork Automation template, simply paste the URL into an image element, e.g.:
{ "type": "Image", "url": "https://quickchart.io/chart?c={type:'bar',data:{labels:['Q1'], datasets:[{label:'Users',data:[50]}]}}", "size": "large" }
This can be tested in the Adaptive Card Designer.
To use data from the TWA notification service, simply paste the variables into the URL e.g.:
Variable: ${RowsWithAdditionalProperties[0].Value.MeetingsVsCallsPercentage}
Variable inside a URL: https://quickchart.io/chart?c={type:'bar',data:{labels:['Q1'], datasets:[{label:'Users',data:[${RowsWithAdditionalProperties[0].Value.MeetingsVsCallsPercentage}]}]}}
Further reading
At QuickChart's homepage there are interactive editors for constructing URLs, a gallery of examples, and extensive documentation.