Html charts in email without using javascript

Question

I'm looking for nice charts for my newsletter. Since javascript is not email friendly I need an html only solution.

I'll send email once a month with statistics of user's performance and stuff done during the month.

So what do you think is the best solution? Can I found some nice basic html charts where I can change little in my back-end with user's data?

I know with JS it would be easy, but is not my case. I'll send both to mobile and desktop.

Thank you very very much!!

you may use https://developers.google.com/chart/image/ as easy as `` — Igor, Feb 02 '17 at 23:20
https://image-charts.com/chart was built just for that (and it's a drop-in replacement for the deprecated Google Image-Charts)... and it has support for gif animation as well — FGRibreau, Sep 14 '18 at 10:01
If you use Chart.js for your Javascript charts, have a look at https://quickchart.io/. It's an open source web service that converts Chart.js to an image embeddable in email. — ty., Mar 28 '19 at 19:13
Hi, a bit late, but you can also use https://charttt.com to generate image charts that can be embedded into emails — danbars, Jun 21 '20 at 11:16

score 4 · Answer 1 · answered Nov 25 '15 at 02:37

4

A little late to the game here, but my team at Ramen recently spun out some internal functionality into a standalone product that does just this: https://ChartURL.com

You can generate charts on the fly using an "Encrypted URL" scheme, or you can send us huge amounts of data and return a Short URL that'll resolve to an image. These URLs can be used in web apps & mobile apps, but the original intent was email charts so I hope this helps!

answered Nov 25 '15 at 02:37

Ryan Angilly

1,589
16
18

1

Very interesting concept, I'll give it a try! – J.Williams Nov 25 '15 at 08:20
seems really cool :) – Wolfack Jul 09 '18 at 08:12
Not working anymore :( – Quentin Jul 27 '21 at 10:07

Ryan Hamilton · Answer 2 · 2015-12-11T12:23:04.387

2

I would recommend against trying to attach js/css/html based charts, you will run into a lot of issues. I've wrote a tutorial on generating charts as images and attaching to emails here: http://www.sqldashboards.com/b/send-email-with-graphs/ Basically you

Configure mutt to allow sending email
Generate charts at the command line.
Send an email, with attachments using mutt

edited Dec 11 '15 at 12:23

answered Dec 10 '15 at 14:05

Ryan Hamilton

2,601
16
17

score 1 · Answer 3 · answered Mar 07 '14 at 13:29

1

You can't simply use raw HTML to get charts. It is simply not possible, just got to use a scripting language to do so, HTML isn't one.

If you are willing to use CSS3 to make your chart a reality, I suggest you to check out this good article: http://www.ssiddique.info/dynamic-chart-in-css.html

answered Mar 07 '14 at 13:29

sidney

2,704
3
28
44

Yes I know, that's why my idea was doing the script part in the back end and send the email already formatted showing charts made only with html stuff. Anyway, how could I include in a email script accepted by email clients ? – J.Williams Mar 07 '14 at 13:36
Which languages are you willing to use? – sidney Mar 07 '14 at 13:37
Any language, what matters is that the script can be read by clients. For example Gmail does not accept javascript, so I can't use it for charts. – J.Williams Mar 07 '14 at 13:47
I now understand clearier your question. You got to use plain html5 with css3, check out the link I gave you: http://www.ssiddique.info/dynamic-chart-in-css.html – sidney Mar 07 '14 at 13:48

score 1 · Answer 4 · answered Mar 07 '14 at 13:31

1

The best idea would be to generate images and send them, as you can't use pure html to make a chart.

answered Mar 07 '14 at 13:31

ntzm

4,663
2
31
35

Images are a good idea, but I'm afraid it would be heavy in the processing and in the email load – J.Williams Mar 07 '14 at 15:22
@gigilatrottola I'm afraid it's probably the only way to accomplish this. If needs be you could make it a GIF format, which would be very small in size and shouldn't affect the processing and size of the email as much as normal pictures. – ntzm Mar 07 '14 at 16:19

score 1 · Answer 5 · answered Mar 07 '14 at 13:32

1

Try creating an animated gif.

http://www.emailology.org/ might have something for you.

answered Mar 07 '14 at 13:32

fauverism

1,970
3
33
59

score 1 · Accepted Answer · edited May 23 '17 at 12:10

You can use any scripting language you want pre-send, but the email itself needs to be pure html. The only way you can change its contents after send, is if you link it to a hosted image, and you swap out that image.

With that being said, if you are after a html email example with a chart to get started, take a look here. It is a fluid template which is the most widely supported technique for mobile, web and desktop browsers.

Html charts in email without using javascript

6 Answers6