Простое добавление кода Javascript на вашу страницу на самом деле не выполнит этот код. По сути, ваш AJAX вызов возвращает что-то, а ваш JS затем вставляет это в div, и ... и все. Браузер не будет пытаться запустить этот материал. Даже если вы обновите JS, чтобы попытаться запустить только что вставленный материал, он не будет работать, потому что браузер даже не знает, что существует новый код - его не было при загрузке страницы, когда браузер разбирает страницу. Вы должны сначала eval() этот новый код, который вводит новый набор проблем. Этот вопрос является хорошим справочником и описывает некоторые из них.
Отступив, тем не менее, есть лучший подход.
Судя по вашему JS, вашему клиенту На странице есть селектор года, поэтому вы можете выбрать, например, 2019 и нажать кнопку «график», и увидеть график ваших продаж в 2019 году. Итак, что вы действительно ищете из AJAX - это график data . Если вы измените год и снова нажмете кнопку, вам понадобится набор данных sh - вам не нужно снова загружать Google Charts JS и инициализировать новый график.
Ваша страница переднего плана может включать все настройки и инициализации вашей диаграммы Google, но без каких-либо данных. Без данных вы, конечно, не сможете их нарисовать, поэтому вам нужно запустить фактическое рисование другим способом, как только вы загрузите свои данные.
PHP
Итак, сначала обновите PHP и удалите все Javascript. Вам нужен только массив значений месяца / продаж:
$my_sales = [];
while ($sales = $user_result->fetch_assoc()) {
// ... your code to set these variables up
$my_sales[$this_month] = $total_month_sales;
}
Удалите теги <script>, все связанные с Google Charts JS, drawChart1, et c - единственное, что AJAX должен вернуть JSON данные. Используя ваш существующий подход PHP:
$result = array('message' => 'success', 'sales_graph' => $my_sales);
header('Content-Type: application/json');
echo json_encode($result);
HTML
Далее, добавьте материал Charts JS, который вы только что удалили из PHP, в ваш интерфейс в graph.html:
google.load('visualization', '1', {packages: ['corechart']});
// Don't want to draw the chart on load any more, you will manually
// draw it once you have some data - so remove this line entirely
// google.setOnLoadCallback(drawChart1);
function drawChart1() {
// ...
}
$(window).resize(function() {
// ...
}
Теперь, для функции, которая фактически рисует aws диаграмму, вы должны быть в состоянии дать ей набор данных для рисования - ie она должна принять параметр:
// values will be the JSON data we got back from the AJAX call
function drawChart1(values) {
Есть еще несколько обручей, через которые нужно перейти, чтобы получить JSON данные, которые мы получаем от AJAX в правильном формате:
// Convert the JSON values to an array, as Google's DataTable
// requires that.
array = [];
for (var i in values) {
array.push([i, values[i]]);
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sales');
data.addRows(array);
Итак, теперь вы подготовьте и запустите свою диаграмму Google. Чтобы нарисовать диаграмму, вам нужно получить некоторые данные и передать их drawChart1() в качестве параметра. Вы можете сделать это с помощью обработчика AJAX success:
success: function(response) {
// response is the JSON data your PHP sends us. Pass the
// 'sales_graph' element of it it to the function and have it
// drawn! You can also test that response.message is 'success'
drawChart1(values.sales_graph);
}
Здесь есть несколько движущихся частей, и я немного подскочил, но гораздо яснее увидеть все это вместе, работает, в действии - вот рабочий JSFiddle . Обратите внимание, что он использует JSFiddles echo для имитации вашего AJAX вызова - в основном я подделываю ваш запрос AJAX и предоставляю некоторые фиктивные данные для возврата.