JavaScript — еще раз о том, как построить диаграмму Google после вызова AJAX
РЕДАКТИРОВАТЬ НАЧАЛО
Поскольку я не получил никакого ответа, я попытаюсь объяснить или, лучше сказать, показать, что сработало для меня (без ajax) и не работает сейчас, когда я пытаюсь использовать ajax. Поскольку примеры говорят больше, чем слова, я запишу основные части кодов.
У меня было два файла, а именно index.php, где находится форма ввода и где строится диаграмма, и script.php, который получает то, что было вставлено в форму, делает запрос с ним и возвращает переменную, которая возвращается к index.php для просто использовать в Google вещи.
Итак, вы здесь:
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Charts -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"],callback:drawChart01});
google.setOnLoadCallback(drawChart01);
// CHART 01
function drawChart01() {
var data = google.visualization.arrayToDataTable([
['Technological Area', 'Number of Publications'],
<?php echo $_SESSION['techAreas03']; ?>
]);
var options = {
chartArea: {width:'100%',height:'100%'},
forceIFrame: 'false',
is3D: 'true',
pieSliceText: 'value',
sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.
titlePosition: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('tech-areas'));
chart.draw(data, options);
}
</script>
</head>
<body>
<form id="publn-nr-srch" action="script.php" method="post" role="form">
<input id="publn-in" name="publn-in" placeholder="Publication Number" type="text" required />
<input id="btn-srch" type="submit" value="Search">
</form>
<?php
if(isset($_SESSION['techAreas03'])){
echo '<div id="tech-areas"></div>';
}
?>
</body>
</html>
и скрипт.php:
<?php
session_start();
# Query
$sql = "SELECT techarea FROM $table WHERE publn = :publn";
$q = $conn->prepare($sql);
$q->execute(array(':publn' => $_POST['publn-in']));
while ($r = $q->fetch(PDO::FETCH_ASSOC)) {
$techAreas00[] = ($r['techarea']);
}
# Separate values of the array that are together in only one field and put them into another array.
$techAreas01 = explode(', ', implode(', ', $techAreas00));
# Count values.
$techAreas02 = array_count_values($techAreas01);
# Sort array.
arsort($techAreas02);
# Transform array in a string that will be used in GOOGLE CHART.
$techAreas03 = implode(', ', array_map(function ($v, $k) { return '[\''.$k.'\','. $v.']'; }, $techAreas02, array_keys($techAreas02)));
$_SESSION['techAreas03'] = $techAreas03;
# Reload index.php, but now with the variable $techAreas03 that will be used in the head to populate the GOOGLE CHART.
header(Location: index.php);
Эта работа просто отлично.
Теперь, когда я пытаюсь использовать ajax, чтобы избежать перезагрузки моего index.php, я не могу построить диаграммы. Проблема в том, что скрипт Google уже был загружен до того, как скрипт script.php создал переменную. Подробнее о проблеме в оригинальном ответе ниже.
И вот коды измененных страниц:
index.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Charts -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"],callback:drawChart01});
google.setOnLoadCallback(drawChart01);
// CHART 01
function drawChart01() {
var data = google.visualization.arrayToDataTable([
['Technological Area', 'Number of Publications'],
<?php echo $techAreas03; ?>
]);
var options = {
chartArea: {width:'100%',height:'100%'},
forceIFrame: 'false',
is3D: 'true',
pieSliceText: 'value',
sliceVisibilityThreshold: 1/20, // Only > 5% will be shown.
titlePosition: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('tech-areas'));
chart.draw(data, options);
}
</script>
</head>
<body>
<form id="publn-nr-srch" action="" method="post" role="form">
<input id="publn-in" name="publn-in" placeholder="Publication Number" type="text" required />
<input id="btn-srch" type="submit" value="Search">
</form>
<div id="ajax"></div>
</body>
<script type="text/javascript">
$(function(){
$('form#publn-nr-srch').submit(function(){
$.ajax({
url: 'script.php',
type: 'POST',
data: $('form#publn-nr-srch').serialize(),
success: function(response) {
$('div#ajax').html(response);
}
});
return false;
});
});
</script>
</html>
а вот скрипт.php:
<?php
session_start();
# Query
$sql = "SELECT techarea FROM $table WHERE publn = :publn";
$q = $conn->prepare($sql);
$q->execute(array(':publn' => $_POST['publn-in']));
while ($r = $q->fetch(PDO::FETCH_ASSOC)) {
$techAreas00[] = ($r['techarea']);
}
# Separate values of the array that are together in only one field and put them into another array.
$techAreas01 = explode(', ', implode(', ', $techAreas00));
# Count values
$techAreas02 = array_count_values($techAreas01);
# Sort array.
arsort($techAreas02);
# Transform array in a string that will be used in GOOGLE CHART.
$techAreas03 = implode(', ', array_map(function ($v, $k) { return '[\''.$k.'\','. $v.']'; }, $techAreas02, array_keys($techAreas02)));
В своем исследовании этой проблемы я обнаружил множество потоков, в которых говорилось о функции обратного вызова для построения диаграммы с помощью ajax, но если у нас уже есть данные для построения диаграммы. Проблема в том, что я не нашел никакого ответа, относящегося к моей проблеме, потому что я должен отправить другие данные через ajax (а именно номер публикации = publn-in), который начинает запрос, и результатом этого запроса являются данные, которые будут быть использованным диаграммой Google.
Я надеюсь, что теперь я могу быть немного более понятным, и вы, ребята, можете мне помочь.
Как уже говорилось, больше информации ниже и в любое время вы можете спросить больше.
Большое спасибо!
РЕДАКТИРОВАТЬ КОНЕЦ
ОРИГИНАЛЬНАЯ ПОЧТА НАЧИНАЕТСЯ
У меня есть форма, которую я использую для отправки информации в php-скрипт через ajax.
Этот скрипт получает эту информацию, запрашивает базу данных и возвращает мне массив, который я преобразую в строку.
Эта строка будет использоваться для построения диаграммы Google.
Я искал, как я мог построить график после вызова ajax, но я не смог получить ожидаемые результаты.
Проблема в том, что он уже загружен, и мы должны использовать обратный вызов для построения графика.
Вот мой код:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart04);
function drawChart04() {
var data = google.visualization.arrayToDataTable([
['Publication', 'Similarity'],
<?php echo $chart; ?>
]);
var options = {
chartArea: {width:'80%',height:'80%'},
forceIFrame: 'true',
titlePosition: 'none',
hAxis: {title: 'Most Similar Publications', textPosition: 'none'},
legend: {position: 'none'}
};
var chart = new google.visualization.LineChart(document.getElementById('sim-curve'));
chart.draw(data, options);
}
</script>
</head>
<body>
<form id="publn-nr-srch" action="" method="post" role="form">
<input class="form-control" id="publn-in" name="publn-in" placeholder="Publication Number" type="text" value="" required />
<input id="btn-srch" class="btn btn-sm btn-primary" type="submit" value=" Search ">
</form>
<div id="ajax"></div>
</body>
<script type="text/javascript">
$(function(){
$('form#publn-nr-srch').submit(function(){
$.ajax({
url: '../models/pubSearchScr.php',
type: 'POST',
data: $('form#publn-nr-srch').serialize(),
success: function(response) {
$('div#ajax').html(response);
}
});
return false;
});
});
</script>
</html>
После запуска скрипта я получаю, например, следующую строку в переменной (здесь все работает хорошо):
$chart = "['1977',8], ['1978',31], ['1979',48], ['1980',34], ['1981',30], ['1982',37], ['1983',28], ['1984',31], ['1985',40], ['1986',32], ['1987',44], ['1988',42], ['1989',45], ['1990',43], ['1991',36], ['1992',31], ['1993',34], ['1994',26], ['1995',25], ['1996',41], ['1997',35], ['1998',27], ['1999',25], ['2000',14], ['2001',31], ['2002',19], ['2003',16], ['2004',21], ['2005',20], ['2006',12], ['2007',16], ['2008',29], ['2009',10], ['2010',13], ['2011',22], ['2012',2], ['2013',2]";
который я использую в гугл-материале (также видно выше в заголовке сессии):
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart04);
function drawChart04() {
var data = google.visualization.arrayToDataTable([
['Publication', 'Similarity'],
<?php echo $chart; ?>
]);
var options = {
chartArea: {width:'80%',height:'80%'},
forceIFrame: 'true',
titlePosition: 'none',
hAxis: {title: 'Most Similar Publications', textPosition: 'none'},
legend: {position: 'none'}
};
var chart = new google.visualization.LineChart(document.getElementById('sim-curve'));
chart.draw(data, options);
}
</script>
В скрипте также есть следующая переменная, которая отображается в ende. В ende я вижу html-контент на экране, но не график:
$output = '
<!-- Similarity Curve -->
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<i class="fa fa-line-chart"></i>
Similarity Curve
</div>
</div>
<div class="panel-body">
<div id="sim-curve"></div>
</div>
</div>
</div>';
echo $output;
Я понимаю проблему, что голова с информацией о графике Google уже загружена без переменной $ chart, прежде чем я запускаю вызов ajax. Затем, когда я запускаю его, все идет хорошо, но график не может быть построен. В своем исследовании я прочитал о функции обратного вызова и т. Д. И подумал, что это уже есть в моем коде. Если нет, то что конкретно нужно в моем случае и ГДЕ? И в голове, или в середине HTML-кода, или в скрипте?
Один совет: когда я делаю то же самое без ajax, а именно с помощью формы html, которая отправляет информацию в скрипт php, а затем скрипт перенаправляется обратно в файл, все работает нормально, потому что голова снова загружается со всей страницей. Моя проблема, когда я должен использовать удивительный AJAX.
Любая помощь будет признательна.
Спасибо заранее.
ОРИГИНАЛЬНЫЙ ПОЧТОВЫЙ КОНЕЦ
Решение
Во-первых, вы должны создать функцию, которая используется для рисования диаграммы Google с вводом данных диаграммы.
Example: drawChart(inputData) = drawChart04(data);
Во-вторых, вы создаете переменную, которая хранит данные диаграммы:
//var inputData = your data;
var inputData = google.visualization.arrayToDataTable([
['Publication', 'Similarity'],
<?php echo $chart; ?>
]);
В-третьих, вы должны знать, как вернуть данные с помощью ajax на сервере (PHP):
Example: dataChart = you query or to do something to get it;
echo json_encode(dataChart); exit; //This is just an example.
В-четвертых, вы должны знать, как передавать данные из PHP в Javascript. Я имею в виду, когда вы получаете ответ, вы должны знать, как построить базу inputData на основе ответа.
$.ajax({url: "....php", type: "POST", dataType: "json", data:{..}})
.done(function(response){
inputData = response; //You have to convert response to inputData. Maybe Json.parse(response).
//I don't know, You have to know that you response. So find the best way to create inputData.
drawChart(inputData);//And finally call this function
});
Вот и все. Я думаю, что вы можете понять, что я упомянул выше. Если вы не можете это исправить. Сообщите мне мой скайп. Я исправлю это для тебя. SkypeID: jewelnguyen8
Другие решения
Других решений пока нет …