Mick Redman: bar

Friday, 11 March 2011

Google Chart API - Not bad

Here, I have provided an example of implementing Google Charts. This should give you the confidence to try more out. I recommend that you visit http://code.google.com/apis/chart/docs/making_charts.html for more options.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google chart</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$chartURL = 'http://chart.googleapis.com/chart?';
/* Add chart type */
$chartURL += 'cht=bhs';
/* add chart size */
$chartURL += '&chs=600x160';
/* add chart scale */
$chartURL += '&chxt=t&chxl=0:|Low+Value|High+Value';
/* add chart key */
$chartURL += '&chdl=Career|Happiness';
/* add chart colours */
$chartURL += '&chco=35D2AB|000000';
/* add chart values */
$chartURL += '&chd=t:';
$chartURL += '40,';
$chartURL += '80';
$('#chart').attr('src', $chartURL);
});
</script>
</head>
<body>
<img id="chart" />
</body>
</html>