sicksand/chart.php

## chart.php
<html>
  <head>
    <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/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" 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([
          ['CPU', 'Usage (in MB)'],
          ['<?php echo $_REQUEST["legend1"];?>',     <?php echo $_REQUEST["value1"];?>],
          ['<?php echo $_REQUEST["legend2"];?>',      <?php echo $_REQUEST["value2"];?>]
        ]);

        var options = {
          title: '<?php echo $_REQUEST["title"];?>',
          pieHole: 0.4,
	  slices: {
            0: { color: 'blue' },
            1: { color: '#39F' }
	  }
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <script type="text/javascript">
	$('window').load(function() {
    		saveAsImg(document.getElementById("donutchart")); // or your ID
	});
    </script>
    <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('donutchart'));">Save as PNG Image</button>
    <button onclick="toImg(document.getElementById('donutchart'), document.getElementById('img_div'));">Convert to image</button>
    <div id="donutchart" style="width: 400px; height: 200px;"></div>
  </body>
</html>

## index.php
<form action="chart.php" method="POST">
Title : <input type="text" size="50" maxlength="150" name="title"><br>
Legend 1 : <input type="text" maxlength="30" name="legend1" value="Used"><br>
Legend 2 : <input type="text" maxlength="30" name="legend2" value="Available"><br>
Value 1  : <input type="text" maxlength="30" name="value1"><br>
Value 2  : <input type="text" maxlength="30" name="value2"><br>
<input type="submit" value="Get Graph">
</form>
	<html>
	<head>
	<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/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" 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([
	['CPU', 'Usage (in MB)'],
	['<?php echo $_REQUEST["legend1"];?>', <?php echo $_REQUEST["value1"];?>],
	['<?php echo $_REQUEST["legend2"];?>', <?php echo $_REQUEST["value2"];?>]
	]);

	var options = {
	title: '<?php echo $_REQUEST["title"];?>',
	pieHole: 0.4,
	slices: {
	0: { color: 'blue' },
	1: { color: '#39F' }
	}
	};

	var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
	chart.draw(data, options);
	}
	</script>
	</head>
	<body>
	<script type="text/javascript">
	$('window').load(function() {
	saveAsImg(document.getElementById("donutchart")); // or your ID
	});
	</script>
	<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('donutchart'));">Save as PNG Image</button>
	<button onclick="toImg(document.getElementById('donutchart'), document.getElementById('img_div'));">Convert to image</button>
	<div id="donutchart" style="width: 400px; height: 200px;"></div>
	</body>
	</html>
	<form action="chart.php" method="POST">
	Title : <input type="text" size="50" maxlength="150" name="title"><br>
	Legend 1 : <input type="text" maxlength="30" name="legend1" value="Used"><br>
	Legend 2 : <input type="text" maxlength="30" name="legend2" value="Available"><br>
	Value 1 : <input type="text" maxlength="30" name="value1"><br>
	Value 2 : <input type="text" maxlength="30" name="value2"><br>
	<input type="submit" value="Get Graph">
	</form>