Execute Google Chart API (Javascript) in php file
google charts have a native method (getImageURI)
it creates a base64 string representation of the chart
which can be included in the src attribute of an img element
or saved to a file as .png
see Printing PNG Charts for more info
in addition, you should wait for the chart's 'ready' event to fire,
before grabbing the image
to send the chart image in an email, recommend having a page that draws the chart
then when the 'ready' event fires, sends the image string via ajax to the controller that sends the email...
see following snippet for example of getting image...
google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0}, legend: { position: 'top' } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'ready', function () { document.getElementById('image_div').innerHTML = '<img src="' + chart.getImageURI() + '" />'; }); chart.draw(data, options); }, packages: ['corechart']});<script src="https://www.gstatic.com/charts/loader.js"></script><div>Chart</div><div id="chart_div"></div><div>Image</div><div id="image_div"></div>EDIT
taking from the example above, when the chart's 'ready' event fires,
send the image string back to the same page via ajax post
then in php, check if the image was received
if received, send email, otherwise draw chart
following is a primitive example of the workflow...
<?php if(isset($_POST['chartImage'])) { $to = "test@test.com"; $subject = "test message"; $headers = "test message"; $message = $_POST['chartImage']; add_filter( 'wp_mail_content_type', 'set_html_content_type' ); wp_mail( $to, $subject, $message, $headers ); remove_filter( 'wp_mail_content_type', 'set_html_content_type' ); } else {?> <script> google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, vAxis: {minValue: 0}, legend: { position: 'top' } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'ready', function () { // send chart image $.ajax({ type: 'POST', url: 'mail.php', data: { 'chartImage': chart.getImageURI(), }, success: function(){ console.log('email sent'); } }); }); chart.draw(data, options); }, packages: ['corechart'] }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div><?php }?>
Not exactly the usage of google chart api, but this might actually help you.
Google also have their Image Charts (which is deprecated, however they stated they have no plans to turn it off). You can use the Image Charts to generate the graph that you want and get an image in return.
I took the data and generated this image:
Which can be generated using this link.
I know this is not exactly the same graphics as the Chart API (and their image charts missing some great things like opacity and stuff) but It might be the quick solution that you are looking for.
And a live snippet:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, vAxis: { minValue: 0 } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); }</script><div id="chart_div"></div> <img src="https://chart.googleapis.com/chart?cht=lc&chd=t:1000,1170,660,1030|400,460,1120,540&chds=a&chxr=1,0,1200,300&chxt=x,y&chxl=0:|2013|2014|2015|2016&chs=600x200&chm=B,c2d1f0,0,0,0|B,f5c4b8,1,1,0&chtt=Company%20Performance&chts=000000,20,l&chdl=Sales|Expenses&chco=0000FF,FF0000">
You can use canvas2html.js to export chart as data URI
<!DOCTYPE html><html><head></head><body> <script src="canvas2html.js"></script> <div id="chart_div"></div> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script> <script type="text/javascript"> google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2013', 1000, 400], ['2014', 1170, 460], ['2015', 660, 1120], ['2016', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: { title: 'Year', titleTextStyle: { color: '#333' } }, vAxis: { minValue: 0 } }; var chart = new google.visualization .AreaChart(document.getElementById('chart_div')); chart.draw(data, options); html2canvas(document.getElementById('chart_div')) .then(function(canvas) { var dataURL = canvas.toDataURL(); // `dataURL` : `data URI` of chart drawn on `<canvas>` element console.log(dataURL); }) } </script></body></html>