Google chart Download and save PNG file - javascript

Here's my google pie chart. Right now, I can right click and save image as PNG.
However I need the image download to happen automatically on a specified folder when the page loads.
I tried various canvas options however couldn't get anything to work.
Download SVG as a PNG image
save google gauge chart as a png
Can someone help?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img src=' + chart.getImageURI() + '>';
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="JSFiddle">
<div id="piechart_3d" style="width: 1100px; height: 500px;"></div>
</div>
</body>
</html>

You can achiev a download with the download html-attribute.
example:
<a href="/image.png" download>
To achiev that in your app do this:
add a download link
<a id="download_link" href="/" download="">download</a>
and change its href attribute as soon as the chart loaded
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
});
if you want to download to happen automatically as soon as the page loaded:
make the a tag invisible
<a style="display:none" id="download_link" href="/" download="">download</a>
and fire a click event directly on it
document.getElementById("download_link").click();
so the google.visualization.events.addListener function should look like this:
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
document.getElementById("download_link").click();
});
the whole code should look like this: (auto-download)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="piechart_3d"></div>
<a style="display:none" id="download_link" href="/" download>download</a>
</body>
<script>
google.charts.load("current", { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
google.visualization.events.addListener(chart, 'ready', function () {
piechart_3d.innerHTML = '<img id="chart" src=' + chart.getImageURI() + '>';
document.getElementById("download_link").setAttribute("href", chart.getImageURI())
document.getElementById("download_link").click();
});
chart.draw(data, options);
}
</script>
</html>
selecting a folder to put in the download is not possible (for security reasons)

Related

How to remove title and bulletins from google charts

I'm using google donut chart, but it's showing the title and bullets.
I need to know how to remove them and make the chart fit inside the card.
<div class="col-xl-4 col-lg-12 col-md-4 col-sm-12 col-12">
<div class="card">
<h5 class="card-header">Credits History</h5>
<div class="card-body">
<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([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
<div id="donutchart" style="width: 220px; height: 155px;"></div>
</div>
</div>
</div>
to remove the chart title, remove the title option from the chart options.
as for the bullets, or bulletins, that is the chart's legend,
to remove, add the following option --> legend: 'none'
and you can use the chartArea option to maximize the chart within the container.
var options = {
chartArea: {
height: '100%',
width: '100%'
},
legend: 'none',
pieHole: 0.4
};
see following working snippet...
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2]
]);
var options = {
chartArea: {
height: '100%',
width: '100%'
},
legend: 'none',
pieHole: 0.4
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 220px; height: 155px;"></div>

jsPDF generates empty pdf only

I am working with jsPDF to create a PDF from my HTML. However, it always generates an empty page doesn't matter which HTML content I enter as the source.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">Hello</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
window.html2canvas = html2canvas;
var doc = new jsPDF("p", "pt", "a4");
doc.html(document.getElementById("content"), {
callback: function(pdf) {
pdf.save("cv-a4.pdf");
}
});
});
</script>
</body>
</html>
What am I doing wrong? In my opinion that matches exactly the documentation. However, as stated above, the pdf generated does not show any content and not the "Hello". ( I took some of the code from this StackOverflow question)
#threxx
Try this code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Save HTML TO PDF</title>
</head>
<body>
<div><button id="cmd">download as PDF</button></div>
<div id="content">
<h1 style="color: brown;">Hello, He/She..</h1>
<p style="color: green;">How Are you ??</p>
Thank you.
</div>
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = window.document.getElementById('content').innerHTML;
doc.fromHTML(source, 30, 30);
doc.save("cv-a4.pdf");
});
</script>
</body>
</html>
I hope above code will be useful for you.
Thank you.
So after doing some more research I found this answer which will return a PDF from the HTML. Small problem: still only very poor CSS styles but afaik jspdf doesn't support custom CSS.
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">
document.getElementById("cmd").addEventListener("click", function () {
var doc = new jsPDF("p", "pt", "a4");
var source = document.body;
var margin = {
top: 20,
left: 20,
right: 20,
bottom: 20
};
doc.fromHTML(source, 30, 30, {
'width': 80, // max width of content on PDF
},
function(pdf){doc.save('saveInCallback.pdf');},
margin
);
});
</script>

Geocharts unable to acept data table from Google Spreadsheet Query

Having issue with reading the Excel file on the URL.
Works fine with bar chart, line charts and pie charts.
Geomap code gives this error:
google.setOnLoadCallback(drawVisualization);
HTML:
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=0Aih8-LAKMBsKdHRBSllqYkZnS2pfWWtGY2JueHdaRmc&usp=sharing,');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
region: 'US', // US
displayMode: 'markers',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
<head>
<title>NSF Data Online </title>
</head>
<span id='chart_div'></span>
</body>
</head>
<body>
<div id="chart_div" style="width: 700px; height: 500px;"></div>
</body>
<title>Welcome to My Web Page</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<meta content="MSHTML 6.00.2800.1400" name="GENERATOR">
</head>
<body>
These changes must be reflected in the web page .
</body>
<hr>
</html>

Google Visualization full browser window

I have this google visualization and I would like to maki it full screen on my browser window: http://cl.ly/image/1y0U1m1o2m0m
The code is:
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var a = <?=$elos?>;
var data = google.visualization.arrayToDataTable(a);
var options = {
title: 'blah blah blah',
//curveType: "function",
width: $(window).width(),
height: $(window).height(),
vAxis: {
minValue:800,
maxValue:2000,
textStyle: {color: 'black'}
},
legend:{position: 'none'}
};
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization"></div>
</body>
</html>
Even though it is set to window size and it creates a rect for the size of the window there is a lot of free space around the chart
To make chart be full page size:
chartArea: {width: '90%', height: '90%'}

Google Charts External Javascript Issue

My Problem is, when i put js code of any google chart in an external javascript file. it start loading page and dosen't display any thing. in case of inline javascripts its working fine.
following is my HTML code "google barchart.html"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<input type="button" id="btn" value="Show Graph" />
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</body>
</html>
and this is my js file "test.js"
$(document).ready(function() { $('#btn').click(function() { //alert("hi");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
//title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
} }); });
*NOTE: it also working fine in external js when this piece of code is not in any js function. but i want to use this in Javascript function.
Thnx in advance.
Moaz
I fixed up your code into 2 working solutions you may use (tested working with IE, Chrome and Mozilla).
JavaScript loads with index page
JavaScript loads after button click
.
Solution 1: JavaScript loads with index page
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<input type="button" id="btn" value="Show Graph">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test.js
google.load('visualization', '1', {'packages':['corechart']});
$(document).ready(function() {
$("#btn").click(function() {
$("#chart_div").load("", function(){
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip: {trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
});
Solution 2: JavaScript loads after button click
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
function loadjsfile(filename, filetype)
{
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>
</head>
<input type="button" id="btn" value="Show Graph" onclick="loadjsfile('test2.js','js')">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test2.js
$("#chart_div").load("",function(){
var data = new google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip:{trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options)
});

Categories

Resources