Google Charts не отображается с использованием новой библиотеки загрузчиков, но отлично работает со старой библиотекой загрузчиков

Решение: орфографическая ошибка при загрузке моего loader.js после проверки консоли браузера.

В настоящее время я показываю Google Charts через старую библиотеку загрузчиков (jsapi), одновременно заполняя диаграммы данными из MySQL с помощью PHP.

Однако из-за необходимости многократного вызова SetOnLoadCallback, чего не может сделать старая библиотека, для этого мне нужно будет преобразовать ее в loader.js.

Проблема в том, что когда я переключился на loader.js, ни один из моих графиков не показывался, только пустой. Ниже мой код для PHP и графики.

Вот мой текущий код с использованием старого загрузчика библиотеки.

<script type="text/javascript" src="https://www.google.com/jsapi"></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'));

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'
};

var chart = new google.visualization.BarChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
</script>

Вот мой код для нового графика.

            <!-- Google Chart -->
<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.charts.load('current', {packages: ['corechart']});

//Chart (Hardest Topics decided by Students)
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'));

//Chart1 (Total Value of Students Frustration and Boredness)
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-->

Вот мой PHP, который получает данные, используемые для заполнения моих графиков

            <?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
?>