ChartWrapper.getChart() returns null - google-visualization

Question

I'm trying to implement clickable chart in dashboard. The user will be redirected to a different webpage based on the segment of pie chart clicked. However, the chartObject is NULL when i use getChart() in the ChartWrapper object. I have no problem pulling out DataTable from ChartWrapper.
I've tried to use 'ready' event before 'select' event in my code but still get NULL. Any advice?
You can try out the code here
// Define a Pie chart 3
pie3 = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart3',
'options': {
//'width': 400,
'height': 300,
'legend': {'position':'right', 'textStyle': {fontSize: 9}},
'title': 'Audit Type',
'chartArea': {'left': 80, 'top': 30, 'right': 0, 'bottom': 0, 'height':300, 'widith':200},
'pieSliceText': 'value',
'slices': {0: {color: '#9fbfdf'}, 1: {color: '#6699cc'}, 2: {color: '#3973ac'}, 3: {color: '#738b28'}, 4: {color: '#a4c639'}, 5: {color: '#bfd774'}},
'fontSize': 11
},
// from the 'data' DataTable.
'view': {'columns': [6]}
});
google.visualization.events.addListener(pie3, 'ready', onReady);
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([yearPicker, slider2, categoryPicker], [pie, pie2, pie3]).
// Draw the entire dashboard.
draw(data);
function onReady() {
google.visualization.events.addListener(pie3.getChart(), 'select', handler);
}
function handler() {
chartObject = pie3.getChart().getSelection();
alert(chartObject);
}
}
google.setOnLoadCallback(drawVisualization);

Answer 1

Your primary problem is that you are only passing 1 column of data to each PieChart. The PieCharts expect to have two columns of data: 1 string column for pie slice labels, and 1 number column for pie slice values. You need to add a second column of data to each PieChart.
Aside from that, you need to move your chart code outside the $(document).ready(function() {...}); handler and load version 1 of the API instead of 1.1 (unless you have a specific reason to load the release candidate version). Generally, your code should be organized like this:
$(document).ready(function () {
// do stuff on document ready
});
function drawVisualization () {
// draw dashboard
}
google.load('visualization', '1', {packages: ['controls'], callback: drawVisualization});