Execute Google Chart API (Javascript) in php file - javascript

I am creating a mail in php, in a wordpress plugin, and would like to include an image created by the google chart api. I tried the following:
<?php
$message.= <<<HTML
<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>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
HTML;
$message.=<<<HTML
<h1> test message </h1>
HTML;
$to = "test#test.com";
$subject = "test message";
$headers = "test message";
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' );
?>
My problem is that Javascript cannot be executed in a delivered mail. Hence, I am looking for a way to execute Javascript inside the script.
Any suggestions how to execute javascript in a php file to get the resulting google-api link?
I appreciate a working example!
PS.: My php version is:
> php --version
PHP 5.5.9-1ubuntu4.17 (cli) (built: May 19 2016 19:05:57)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
with Zend OPcache v7.0.3, Copyright (c) 1999-2014, by Zend Technologies
with Xdebug v2.4.0, Copyright (c) 2002-2016, by Derick Rethans

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>
plnkr http://plnkr.co/edit/WPeiFuSdFIYP9297yHYN?p=preview

I would render the charts using PhantomJS or any other headless browser good with js. Please see this link for examples:
http://johanndutoit.net/google-charts-js-api-server-side-nodejs/
Since you're using php you need to wrap the request with something like this:
http://jonnnnyw.github.io/php-phantomjs/

Related

Python code to get a value from javascript

I want to run this code in JavaScript from PYTHON maybe with (PyV8, js2py, BeautifulSoup or seleniumto) to get the image path and print or store it in csv file, so I want to print image path like "data:image/png;base64,iVBORw0KGgo~~"
Thanks a lot and happy new year!
<html>
<head>
<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'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: {
position: 'bottom'
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
google.visualization.events.addListener(chart, 'ready', function() {
curve_chart.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(curve_chart.innerHTML);
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

How to create downloadable link of google chart in image file

In the code, I am trying to add a hyperlink below the chart. As I click it, it will take me to a new tab with a google chart image for download.Any helps?
https://codepad.remoteinterview.io/KOURCFTBEG
As I viewed a lot of examples, most of them put
google.visualization.events.addListener(chart, 'ready',function() {
console.log(chart.getChart().getImageURI());
document.getElementById('png').innerHTML = '<a href="' +
chart.getChart().getImageURI() + '">Printable version</a>';
});
It seems to me that this would create a downloadable link to an image of the google chart on the <div id=png>But in my case, no link or clickable button is created.
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawBar);
function drawBar() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2013', 1001, 401, 201],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
//---------------------------//
var chart = new google.charts.Bar(document.getElementById('chart_div'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function() {
console.log(chart.getChart().getImageURI());
document.getElementById('png').innerHTML = 'Printable version';
});
chart.draw(data, options);
}
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']},{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id='png'></div>
</body>
I followed the online source as similar as I can, but still get error like chart.getURI() is not function.
Here is the online source I referred most. Here is Fiddle.
Try this
<a href="link_to_image_download" target=_blank>Download here</a>
if you don't have a link to download, go to imgur.com and upload the image and add the share link into your href=
You can use print() as suggested by Google Developer API.
Here is the thing I assume you're looking for:
https://developers.google.com/chart/interactive/docs/printing
By removing getChart() in chart.getChart().getImageURI()and
,in package, by modifying bar to corechart can do the work.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBar);
function drawBar() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2013', 1001, 401, 201],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
};
//---------------------------//
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function() {
// console.log(chart.getImageURI());
document.getElementById('png').innerHTML = 'Printable version';
});
chart.draw(data, options);
}
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']},{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id='png'></div>
</body>

Is there any solution for intersecting two lines in google charts api shows information for both lines?

I am using google charts api for some graph.following is code which i am using
<html>
<head>
<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'],
['2004', 1000, 400],
['2005', 1170, 1170],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 660, 660],
['2009', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
where two lines are intersecting each other two times and because of that it is showing information only for one line .
Is there any way so that i can show information for both of lines when cursor is over that point?
try using...
focusTarget: 'category'
in the configuration options, see following example...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 1170],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 660, 660],
['2009', 1030, 540]
]);
new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
focusTarget: 'category',
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
});
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
another option would be to provide your own tooltip
see following example, pretty basic but shows the logic...
add a tooltip column, after each value column
then populate the tooltip column with an html string
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 1170],
['2006', 660, 1120],
['2007', 1030, 540],
['2008', 660, 660],
['2009', 1030, 540]
]);
// add tooltip columns
data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// build tooltip values
for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setValue(i, 2, getTooltip(i, 1, 3));
data.setValue(i, 4, getTooltip(i, 3, 1));
}
// set tooltip content
function getTooltip(row, col1, col2) {
var tooltip = '<div class="tooltipLabel">' + data.getValue(row, 0) + '</div>';
tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col1) + '</span>: ' + data.getValue(row, col1) + '</div>';
if (data.getValue(row, col1) === data.getValue(row, col2)) {
tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col2) + '</span>: ' + data.getValue(row, col2) + '</div>';
}
return tooltip;
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
curveType: 'function',
legend: { position: 'bottom' },
pointSize: 5,
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
div {
padding: 6px 6px 6px 6px;
font-name: Arial;
}
.tooltipLabel {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google Bar Chart Not Changing Background Color

I'm using the google Material Charts static api library and I cannot figure out why the background color I"m entering is not reflecting the change when the page loads.
Here are the options I have:
var options = {
backgroundColor: '#E8E4D8',
chart: {
title: 'Coaches by Service',
subtitle: 'Coaches by Services: From 2016-09-10 until Today'
}
};
And here is how I'm instantiating the chart:
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
The chart title and subtitle are correctly displaying, any advice as to why the background color remains as the default white would be greatly appreciated.
Is there more you can share? Appears to work here...
Maybe, check the version you're loading.
Here, I use frozen version '44', instead of 'current'.
There have been recent issues.
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
backgroundColor: '#E8E4D8',
chart: {
title: 'Coaches by Service',
subtitle: 'Coaches by Services: From 2016-09-10 until Today'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
For me it was missing google.charts.Bar.convertOptions
Originally it was like this.
chart.draw(data, options);
This works:
chart.draw(data, google.charts.Bar.convertOptions(options));

Draw a based line in Google line chart

I working with Google line chart I want to draw a based line but I don't know how should I do that for example I want to draw line in 2004 between 400 and 600 how should I do that
here Google Sample:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You can do this in a few different ways, depending on exactly what you want to achieve. The easiest way is to use "interval" role columns:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', {role: 'interval', type: 'number'}, {role: 'interval', type: 'number'}],
['2004', 1000, 400, 400, 600],
['2005', 1170, 460, null, null],
['2006', 660, 1120, null, null],
['2007', 1030, 540, null, null]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
There is quite a bit of customization you can do with intervals, see the documentation.
Another way is to add a new series of data for this line, change the data type of the first column from "string" to "number", and add multiple rows of data with the same x-values, eg:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'vertical lines'],
[2004, 1000, 400, 400],
[2004, null, null, 600],
[2005, 1170, 460, null],
[2006, 660, 1120, null],
[2007, 1030, 540, null]
]);
var options = {
title: 'Company Performance',
interpolateNulls: true, // this prevents your other lines from breaking
series: {
2: {
// these options control your new series for the vertical lines
visibleInLegend: false, // hide from the legend
enableInteractivity: false // make the line non-interactive
color: '#9055a6' // set the color of the line
// etc...
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

Categories