How to code an email to render a Google Chart in an email or a viable alternative.

7,280 views
Skip to first unread message

JPC

unread,
Mar 8, 2016, 11:50:46 PM3/8/16
to Google Visualization API
I am trying to take server side acquired data, wrapped in HTML, PHP code, Javascript or whatever, to build code then sent via mail so the the recipient's browser shows him a graphic, 

I've tried to use Google Charts Quickstart code (https://developers.google.com/chart/interactive/docs/quick_start) 

I've tried for three days to get it to work in a PHP email executed from the BASH shell, e.g. php t5.php 
I am able to successfully send basic HML in the mail php template code below. 
 
I took the quick-start code (above) and put it in the PHP email template (below) , being careful to change the proper double quotes (") to single quotes ('). See attached code (t5.php).

<?php
 $to .= 'y...@gmail.com';

 $subject = 'Google Chart';

$message = "
<html>
.
.see attached file with Google quick-start source
.
</html>
";

$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type:text/html;charset=UTF-8' . "\r\n";

mail($to,$subject,$message,$headers);
?>
 
So, I'm wondering if I have an improper Header or if Javascript is an issue or if I've done something stupid with quotes. 

I've searched Google, several forums, Github, etc. for to find a simple working example of a Google Chart embedded in an email using a process that can be automated. No joy. 
Perhaps this cannot be done via mail and can only be done from a website? 

It has been suggested that I take screenshots and send the .png or .jpg to my target recipient - not a process that can be automated. 

  1. If for some reason this can't be done, I'd like to know.
  2. If it can be done, I'd love to see an example. 
  3. If there is a better way to send data, wrapped in HTML, PHP code, Javascript or whatever, to build code then sent via mail so the the recipient's browser shows him a graphic, I would love to know what it is. 
Thank you. 
t5.php

Sergey Grabkovsky

unread,
Mar 9, 2016, 9:44:05 AM3/9/16
to Google Visualization API
Hi JPC,

I'm under the impression that JavaScript execution is either severely limited or disabled in most (if not all) email clients. So a live Google Chart is out of the question. One thing that you could do is to save an image of your desired chart via getImageURI, however this will require you to first render your chart in a browser, capture the image data URL and embed that image in your email. Another alternative would be to use our deprecated image charts, which work by constructing a URL to a server that serves an image back.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/4512d9e6-f730-4122-9a5c-b0dbffe4a780%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
--

unnamed.gif

•

Sergey Grabkovsky

•

Software Engineer

•

Google, Inc

•

gra...@google.com


carinlynchin

unread,
Jul 27, 2016, 1:07:14 PM7/27/16
to Google Visualization API
What if the email is started from the back end. Its automated emails based on schedules... how could we get an image to show up from there?

Jonah Pauline

unread,
Feb 11, 2017, 1:08:48 AM2/11/17
to Google Visualization API
Was a solution ever found on this topic? I would love to embed a google chart into a mail chimp email.

I tried embedding the chart through a Google Site and then using that URL to generate a mail chimp campaign based on that URL, but the embedded charts are not visible, only the very inconspicuous hover link that sends you to google sites to view the original chart.

This was the case when I used the embed code for either "Interactive" or "Image" embed codes.

David Burton

unread,
Feb 11, 2017, 8:19:39 PM2/11/17
to Google Visualization API
What I do for my sealevel graphs is save a .png file (via getImageURI), and embed the image in the email, along with a link that points to the web page for the interactive version.  Like this:
http://sealevel.info/MSL_graph.php?id=190-091&c_date=1900/1-2019/12&boxcar=1&boxwidth=2&thick







James Leo Mayol

unread,
Mar 21, 2017, 12:19:25 AM3/21/17
to Google Visualization API
I'm also looking for this kind of creating Google Charts without rendering in the browser. Did you by any chance have solution? 


David Burton

unread,
Mar 21, 2017, 1:33:11 AM3/21/17
to google-visua...@googlegroups.com
James Leo Mayol wrote:

It has been suggested that I take screenshots and send the .png or .jpg to my target recipient - not a process that can be automated.

Well, it can be automated, but it's not pretty. Not pretty at all.

Well, you don't actually need to take screenshots. The chart.getImageURI() method will give you a (very long!) base64 encoding of the whole chart.

But the problem is, then what can you do with it? Javascript in the browser can't write a .png file, and Google Charts is not compatible with Node.js.

I needed to do this for over 1200 graphs, every year or so. Right-clicking and saving each of them obviously was not a reasonable option.

What I ended up doing was adding an undocumented URL parameter on my web page, which tells my javascript code to stuff the generated graph into "web storage" (a/k/a "DOM storage") in base64 encoded form. Google Chrome or Chromium stores Web Storage in a Sqlite3 database file. Python has a module which can read those.

You can see where this is going, can't you? So ugly it'd make a freight train take a dirt road.

So I have a Python program which shells Chromium Portable (instead of Chrome, to avoid interfering with whatever Chrome session is running), passing in the URL that runs my graph-generating web page, with URL parameters that tell it what graph to render, and which also includes the magic export-command parameter. The web page's javascript generates the graph using Google visualization tools, gets a base64 encoding via getImageURI(0, and stuffs it into Web Storage, and then the javascript code calls window.close() to close the page and the Chromium Portable browser. The Python program then reads the Sqlite file left by Chromium, which contains the base64 encoded graph. The Python program extracts the graph, converts it from Base64 encoding, and writes it to a .png file on the workstation.

Believe it or not, that works.

If you can stomach the stench, then send me an email, and I'll send you some sample code.

Another, similar approach would be to have your javascript POST the generated Base64-encoded graph to a PHP web page, which then writes it to a .png file on the server.

I think that's but not quite as ugly. It would probably be a better approach if you want the exported .png files to end up on the server, instead of the workstation. Unfortunately, I don't have sample code for that.

Dave
(go to "Data" => "Spreadsheets & thumbnails," and then click any of the "thumbnails" links)


--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/iNSCeQ2ljnI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Muhammad Ali

unread,
Jul 6, 2017, 8:55:25 AM7/6/17
to Google Visualization API
Which Google Charts function do you utilize to generate the graph-wide x-axis and y-axis lines when the mouse is hovering over a data point?

Help is much appreciated. Thanks.

David Burton

unread,
Jul 6, 2017, 12:04:23 PM7/6/17
to Google Visualization API
In the MSL_graph.php file is this line:

options.crosshair = { trigger: 'both', focused: {color: '#fcc', opacity: 0.8, orientation:'both'} };
Reply all
Reply to author
Forward
0 new messages