Related
How I can modify the size of bar width of google chart column? I tried to add 'bar: { groupWidth: "20%" }' but it does nothing to the chart.
I really wanted it to make it thinner.
Here is the code that I want to use from google chart:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['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'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
</body>
</html>
According to the documentation,
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.
One of these options is the bar.groupWidth, which seems to not have support yet.
In this case, since you are working with a group of bars and there's only one array of information in data:
['2017', 1030, 540, 350]
then that option doesn't seem to work. However, if there were two or more groups, it seemed to render but in a limited way. This said, I was able to find some workarounds, each one with its own positive aspects and drawbacks.
Change from Material Charts to Classical Charts
Here you have to reconstruct the chart's code following the Classical one
Pros: options fully supported
Cons: you will change from Material Charts to Classical Charts
google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Financial status',{ role: "style" }],
["Sales", 1030, "#4285f4"],
["Expenses", 540, "#db4437"],
["Profit", 350, "f4b400"],
]);
var view = new google.visualization.DataView(data);
var options = {
title: "Company Performance",
subtitle: "Sales, Expenses, and Profit: 2017",
width: 600, // chart width
bar: { groupWidth: "45%" }, // width of bars here
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
Separate that only group of bars into single bars
Put that only group bar in different arrays and adapt your labels
Pros: the width will indeed change from 0 to 100% in groupWidth
Cons: looses colored bars
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Financial status'],
["Sales", 1030],
["Expenses", 540],
["Profit", 350],
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2017',
},
bar: { groupWidth: '50%' }, // change width here
width: 600, // width of the chart
height: 400 // height of the chart
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;">
Use meaningless arrays
Put the array of information in the middle of two other meaningless arrays so
that you center your main data and gives the impression
Pros: still uses the Material Chart design
Cons: stretches the bars, doesn't provide space between bars
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
[' ', 0, 0, 0], // meaningless
['2017', 1030, 540, 350],
[' ', 0, 0, 0] // meaningless
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2017',
},
bar: { groupWidth: '90%' }, // change width of bar here,
width: 600, // width of the chart
height: 400, // height of the chart
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 300px;">
I've used both safari and google chrome as web browser both of them are showing blank page. But when I wrote a paragraph in html file it's showing the paragraph only, but not the javascript part. I have named my javascript file as map.js.
HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="map.js"></script>
</head>
<body>
</body>
</html>
JAVASCRIPT file:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart', 'corechart']});
google.charts.setOnLoadCallback(drawRegionsMap);
google.charts.setOnLoadCallback(drawChart);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Customer Count', 'Agent Count'],
['Argentina', 999000, 100],
['Australia', 969000, 450],
['Belgium', 12000, 200],
['Brazil', 850000, 250],
['Canada', 1110000, 590],
['China', 3975000, 690],
['Colombia', 4500, 100],
['Denmark', 78600, 150],
['France', 67000, 400],
['Germany', 140000, 550],
['India', 1060000, 560],
['Japan', 60000, 420],
['Nigeria', 1054000, 305],
['Philippines', 120000, 230],
['Russia', 2904000, 180],
['Singapore', 79000, 450],
['South Korea', 15000, 290],
['Switzerland', 35000, 230],
['United Kingdom', 4015000, 750],
['United States', 5000500, 1500],
]);
var options = {
colorAxis: {colors: ['#eee8f3', '#ddd1e7','#ccbadc','#bba3d0','#aa8cc5','#9975b9','#885ead', '#7647a2', '#663096', '#551a8b']},
legend: 'none',
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
Javascrip is a logic running behind the html page. Javascript doesn't render (or show) on the page. It can manipulate the html elements already existing on the page, or add new elements if instructed.
Try starting with simple example and tutorials https://www.w3schools.com/html/default.asp to learn HTML and https://www.w3schools.com/js/default.asp to learn 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>
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>
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/