Sending google visualization chart to email

Question

Can we send Google Visualization chart to an email client? I tried to copy paste the javascript code while sending the email, but its been removed on the fly by gmail.

Thanks and Regards.

Trichite

With AlphaMail's feature Dynamic Images you can copy and paste the code, take a look at this example I've written: How to Use Google Charts in Transactional Email. – Ministry

you can easily use google image charts, works a treat, check datamakessense.com/kpi-emails-with-google-charts-url-parameters – Degradable

you can use this to send emails with embedded images btw, if you go for downloading google image charts - the benefit of that would be that they will be displayed even when external images are disabled in the client datamakessense.com/… – Degradable

Answer 1

There is very little JS support in email clients. so you will have to use an image chart. But you could wrap the chart in a link to the svg version.

Mcreynolds

could you provide more information on how do you mean exactly to wrap the chart in a link to the svg version? thank you :) – Mile

Inside a HTML email you can put <a href=""> </a> tags around the <img /> of the chart then the link can go to a page with the original chart on. – Mcreynolds

Answer 2

Disclaimer: I'm Image-Charts founder.

6 years later! Google Image-Charts is deprecated since 2012, and as an indiehacker, I don't want to rewrite from scratch an image generation backend each time I started a new SaaS to just be able to send charts in email...

That's why I've built Image-charts 👍 and added gif animation on top of it 🚀(chart animations in emails are awesome!!), no more server-side chart rendering pain, no scaling issues, it's blazing fast, 1 URL = 1 image chart.

https://image-charts.com/chart
?cht=bvg
&chd=t:10,15,25,30,40,80
&chs=700x300
&chxt=x,y
&chxl=0:|March '18|April '18|May '18|June '18|July '18|August '18|
&chdl=Visitors (in thousands)
&chf=b0,lg,90,05B142,1,0CE858,0.2
&chxs=1N**K
&chtt=Visitors report
&chma=0,0,10,10
&chl=||||+33% !|x2 !

Merchandise

Answer 3

I ran into this problem as well. In order to send a chart in email, you need to render it as an image because email clients strip Javascript.

If you're using Google Charts, you'll have to run the Javascript and then export it using getImageURI. To automate this, you need a headless renderer like puppeteer.

The solution to the problem is open source. I wrapped chart rendering in a library and web server: https://github.com/typpo/quickchart. This web service handles the rendering details, all you do is call the API with your data.

For example, define your chart in the query parameters:

https://quickchart.io/chart?width=500&height=300&c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}

The above URL renders this image:

Hope this helps!

Benitobenjamen

I can't believe you got only 2 upvotes [with me now 3]. Your wrapper is fantastic and easy to use. It covers all my needs. Another question: How long do you plan to run the URL quickchart.io ? – Knurly

Hi Peter - paying customers allow me to host quickchart.io sustainably, and I intend to run the free version indefinitely. I've also open-sourced the project so adopters have a form of insurance if something were to happen to QuickChart. – Benitobenjamen

Answer 4

Google charts could be published in 2 ways:

1. as an Image. Edit Chart-> Publish Chart-> Format : image. An image link is generated. This image link could be either used in any html page or could be embedded in any email.

2. as an Interactive Chart. Edit Chart-> Publish Chart-> Format : Interactive Chart. In this case javascript code has to be inserted. This could only be published in html pages. This could not be attached in email body as most email servers/clients do not process javascript code (AFAIK).

Davon

Answer 5

3.5 years later... :)

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.

It was built on top of C3js.org so there's a ton of flexibility in what you can generate.

These URLs can be used in web apps & mobile apps, but the original intent was email charts so I hope this helps!

Myalgia

Site has been shutdown. – Crenulate

Answer 6

Doesn't Google Charts have an API where you can just build a URL and it returns an image - no Javascript needed? It certainly used to. If you can use that, then:

a) Just put the URL in the email and let the users email client get it

b) Fetch the image with CURL and attach to the email.

Inquiline

you are correct, but image functionality doesn't suite my demands. I have to have svg functionality of google charts. – Trichite