I am trying to convert google chart into an image. I found a perfect example of what i need on jsfiddle (http://jsfiddle.net/SCjm8/32/) but as i paste the code on my localhost i am getting this error:
Uncaught ReferenceError: canvg is not defined
Why does it work on jsfiddle and not on my localhost?
Edit: Just needed to add the 3 external resources from jsfiddle that were located on the left side, will know this in the future
jsfiddle allows users to add reference to external resources. There is a reference to canvg.js in the jsfiddle above. Looking at your message, it looks like you are missing a reference to this file. To see all the external references referenced by the fiddle, expand the external resources and add those references to your localhost file.
In your jsfiddle, there are three external javascript files:
Make sure you reference all of these.
For more information on jsfiddle, visit the documentation page.
As mentioned by @Pitamber you need to add the convg libs more info here - https://code.google.com/p/canvg/
So a working example would be
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="img_div" style="position: fixed; top: 0; right: 0; z-index: 10; border: 1px solid #b9b9b9">
Image will be placed here
</div>
<button onclick="saveAsImg(document.getElementById('pie_div'));">Save as PNG Image</button>
<button onclick="toImg(document.getElementById('pie_div'), document.getElementById('img_div'));">Convert to image</button>
<div id="pie_div"></div>
</body>
<script>
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL('image/png');
canvas.parentNode.removeChild(canvas);
return imgData;
}
function saveAsImg(chartContainer) {
var imgData = getImgData(chartContainer);
// Replacing the mime-type will force the browser to trigger a download
// rather than displaying the image in the browser window.
window.location = imgData.replace('image/png', 'image/octet-stream');
}
function toImg(chartContainer, imgContainer) {
var doc = chartContainer.ownerDocument;
var img = doc.createElement('img');
img.src = getImgData(chartContainer);
while (imgContainer.firstChild) {
imgContainer.removeChild(imgContainer.firstChild);
}
imgContainer.appendChild(img);
}
google.load('visualization', '1', {packages: ['corechart', 'treemap', 'geochart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Pie chart
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.getElementById('pie_div'));
chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
}
</script>
</html>
