Google Chart does not show after adding addListener

[Kin Leung Tang]

I want to add interactivity to my Google Chart. I am planning to use addListener to my Google Chart so that when users click on the pie chart, it will draw up another chart. I'm not very familiar with Google Visualization and pretty bad in practical skills for coding, hence I wanted to make sure I can make the example provided by Google works before proceeding on drawing up another chart.

However, when I followed the partial code snippet example provided in Google developer docs, the chart does not appear in my webpage. If I remove the AddListener and SelectHandler, the chart will appear again. I've tried to use the updated library code, loader.js and followed the docs accordingly, but none of my charts will appear even if there's no AddListener or SelectHandler.

The data is taken using PHP from MySQL database.

Here is my code for the chart.

<!-- Google Chart -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!--<script type="text/javascript" sec="https://www.gstatic.com/charts/loader.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
//google.charts.load('current', {packages: ['corechart']});

//Chart (Hardest Topics decided by Students)
google.setOnLoadCallback(drawChart)
//google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: '',
is3D: 'true'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, selectedItem.column);
alert('The user selected ' + value);
}
}
google.visualiation.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
//Chart1 (Total Value of Students Frustration and Boredness)
google.setOnLoadCallback(drawChart1)
//google.charts.setOnLoadCallback(drawChart1);
function drawChart1() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable1?>);
var options = {
title: 'Students Frustration and Boredness Value',
is3D: 'true',
legend: 'left'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
</script>
<!-- Google Chart end-->
</head>

Here is my PHP that gets the data used to populate my charts

<?php
$con=mysqli_connect("localhost","root","password") or die("Failed to connect with database");
mysqli_select_db($con, "tutor");

//MySQL query start
$sql="SELECT *
FROM googlechart";

$sql1="SELECT username, sum(frustratedINT), sum(boredINT)
FROM `selfreportfrustration`
WHERE frustrated = 'Y' OR bored = 'Y'
GROUP BY username";
//MySQL query end
//Result start
$result = mysqli_query($con,$sql) or die(mysqli_error($con));
$result1 = mysqli_query($con,$sql1) or die(mysqli_error($con));
//Result end
//Rows start
$rows = array();
$rows1 = array();
//Rows end
$flag = true;

//Table start
$table = array();
$table1 = array();
//Table end
//Table Column array start
$table['cols'] = array(

// Labels for your chart, these represent the column titles
// Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
array('label' => 'Weekly Task', 'type' => 'string'),
array('label' => 'Percentage', 'type' => 'number')

);
$table1['cols'] = array(
array('label' => 'User', 'type' => 'string'),
array('label' => 'Frustrated', 'type' => 'number'),
array('label' => 'Bored', 'type' => 'number')
);
//Table Column array end
//Table Row array start
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
$temp = array();
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['weekly_task']);

// Values of each slice
$temp[] = array('v' => (int) $r['percentage']);
$rows[] = array('c' => $temp);
}
$rows1 = array();
while($r1 = mysqli_fetch_assoc($result1)) {
$temp1 = array();
$temp1[] = array('v' => (string) $r1['username']);

$temp1[] = array('v' => (int) $r1['sum(frustratedINT)']);
$temp1[] = array('v' => (int) $r1['sum(boredINT)']);
$rows1[] = array('c' => $temp1);
}
//Table Row array end
//Table Row start
$table['rows'] = $rows;
$table1['rows'] = $rows1;
//Table Row end
//json start
$jsonTable = json_encode($table);

$jsonTable1 = json_encode($table1);
//echo $jsonTable;
//json end
?>