Please find the following code.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<div id="piechart" style="width:80%;height:600px;"></div>
<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([
['Division', 'Compliances','link', 'Non Compliances'],
['ILTD', 500,'http://en.wikipedia.org/wiki/2003', 100],
['PSPD', 682,'http://en.wikipedia.org/wiki/2004', 200],
['LRBD', 1874,'http://en.wikipedia.org/wiki/2005', 180],
['ESPB', 1324,'http://en.wikipedia.org/wiki/2006', 99],
['CORP', 457,'http://en.wikipedia.org/wiki/2007', 56],
['PSPB', 1598,'http://en.wikipedia.org/wiki/2008', 45]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,3]);
var options = {
title: 'Summary Report',
/*width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}*/
legend: { position: 'bottom', maxLines: 3 },
isStacked: true,
series: {
0: { color: '#109618' },
1: { color: '#dc3912' }
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('piechart'));
chart.draw(view, options);
var selectHandler = function(e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 2 );
}
google.visualization.events.addListener(chart, 'select', selectHandler);
}
</script>
</body>
</html>
No comments:
Post a Comment