kenrick95/gist:3cfeb5f7ba80e98132b9

## gistfile1.html
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script>
<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);
  }
</script>

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  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('google_visualization_div'));
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
  }
</script>
</head>
<body>
<div id="google_visualization_div"></div>

<button onclick="saveAsImg(document.getElementById('google_visualization_div'));">Save as PNG Image</button>
<button onclick="toImg(document.getElementById('google_visualization_div'), document.getElementById('img_div'));">Convert to image</button>
<hr>
<div id="img_div">
  Image will be placed here
</div>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>

	<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
	<script type="text/javascript" src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script>
	<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);
	}
	</script>

	<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	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('google_visualization_div'));
	chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
	}
	</script>
	</head>
	<body>
	<div id="google_visualization_div"></div>

	<button onclick="saveAsImg(document.getElementById('google_visualization_div'));">Save as PNG Image</button>
	<button onclick="toImg(document.getElementById('google_visualization_div'), document.getElementById('img_div'));">Convert to image</button>
	<hr>
	<div id="img_div">
	Image will be placed here
	</div>
	</body>
	</html>