How to send Google Chart by email?

Asked

Viewed 823 times

2

What would be a viable solution to send a Chart via email, via PHP? To get the Chart, I use it as follows:

      google.load("visualization", "1", {packages:["corechart"]});
    				      google.setOnLoadCallback(drawChart);
    				      function drawChart() {
    				        var data = google.visualization.arrayToDataTable([
    					        ['Element', 'Density', { role: 'style' }],
    					        ['Copper', 8.94, '#b87333', ],
    					        ['Silver', 10.49, 'silver'],
    					        ['Gold', 19.30, 'gold'],
    					        ['Platinum', 21.45, 'color: #e5e4e2' ]
    					      ]);
    
    				        var options = {
    				          title: 'Company Performance',
    				          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
    				          vAxis: {minValue: 0}
    				        };
    
    				        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    
    
    				        google.visualization.events.addListener(chart, 'ready', function () {
    					        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
    					        console.log(chart_div.innerHTML);
    					      });
    
    				        chart.draw(data, options);
    				      }
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    
    				    <div id="chart_div"></div>

This way he returns me the Chart in a "printable version".

  • Taking as conclusion the text components that use formatting, you will have to throw your html in the body of the email.

  • Yes, but the Google Charts API is called only in the client and so does not work in an email. I am looking for a viable alternative to get that Chart from the server side and send only the image.

1 answer

2


Google Charts are designed using SVG. Some email providers provide SVG reading, others do not. The solution I found was convert SVG to PNG and save the PNG file to the server and include a tag <img src=""> in the body of the email.

From Google Chart to PHP

Google Chart works on the Front-end. PHP is a server-side language. You will need to run the frontend so that the chart is drawn and then collect all the generated SVG and forward it to PHP. With jQuery, you could take content using something simple, like

var content = jQuery('#chart_div').html();

Once done, use an Ajax call to deliver the content to the server so it can be emailed.

Notes: In particular, I preferred writing SVG in PHP itself rather than using Google Chart. You can learn how to chart using SVG and get PHP to write all the SVG content and convert it to PNG. This way, there is no need for front-end script executions. The server itself would take care of everything.

Converting SVG to PNG

   $path = 'path/to/file.png';

    $im = new Imagick();
    $im->readImageBlob($svg_value);

    /* png settings */
    $im->setImageFormat("png24");
    // $im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1);  /* Optional, if you need to resize */

    $im->writeImage($path); /* (or .jpg) */
    $im->clear();
    $im->destroy();

Browser other questions tagged

You are not signed in. Login or sign up in order to post.