DEV Community

Cover image for How to put graphs in your emails programmatically
Luke Liukonen
Luke Liukonen

Posted on

How to put graphs in your emails programmatically

Use Case: I run speed tests daily, and every week I'd like a report showing my speed results
Problem: Javascript just doesn't work for email. You can make a website look great with a number of JS libraries that won't work once you email it.
Solution. I found 2 services, Image-charts.com, and quickchart.io that could relieve this problem by using a dynamically generated chart image

Email is a finicky thing. With email you can insert all sorts of HTML, however, pending your client, Javascript just doesn't work for email. I learned this while attempting to add a graph to an email I generate using NodeRed. I have a Speed test that occurs on the hour. I like to know that I am getting what I pay for as far as bandwidth is concerned. That said, the furthest I got on it was being able to take the CSV file and generate a table and shoot it in an email. I decided then to play around with Google Chart API. It was easy to get set up and looked great in my browser, but when I would inject it into the body of my email, and send it, well, Gmail did not like my graph. So after doing some digging, I found some very unfortunate news, don't expect ANY javascript to properly work in an email client. At this point, I was just going to accept defeat and deal with tables, but then I decided to spend some time and research it. I can't be the only person who had this problem. Turns out, I'm not. I found a fix, Well, 2 solutions. These solutions are image-charts.com and quickchart.io. Both services offer APIs to generate images of the data you provide to them. I played around with both of them, and they both have their ups and downs, but would both work for my solution. Rather than having a JSON object embedded on your page to generate an image, you instead pass the data into the query of the URL. You are essentially embedding a dynamically driven image on your page. Both clients have a Get and Post method, with the post method returning a shorter image URL. In my case, I have just enough data to keep it in the get command. One thing you do have to watch out for if using a Git command is the number of characters you pass, as there are limits on how much data you can send to these APIs using get. I did reach the limit on image-charts.com's API and am going with quickchart.io to generate my chart for me.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay