Загрузка изображения до Google Charts Ajax

Question

Загрузка изображения до Google Charts Ajax

Я хочу поставить загрузочное изображение во время загрузки гугл чарта.

Я пытался использовать AjaxStart () / AjaxStop () или beforeSend, но это не сработало.

Кто-нибудь знает, как это можно сделать с помощью диаграмм Google?

Пример загрузки изображения: http://loadinggif.com/generated-image?imageId=32&BGCOLOR =% 23ffffff&fgColor =% 23ff000a&transparentBg = 1&скачать = 0&случайные = 0.9720576445106417

Index.php

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type='text/javascript' src='jquery-1.11.1.min.js'></script>
<script type='text/javascript'>// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['table']});
//google.setOnLoadCallback(drawChart);

function drawChart() {
var jsonData = $.ajax({
url: "Index-ajax.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Table(document.getElementById('chart_div'));

chart.draw(data, {width: 1000, 'allowHtml': true});
}$(document).ready(function clicar_botão_buscar(){
$("#button").click(function(){
drawChart();
})
})

</script>

</head>
<body><input type='button' id='button_buscar' value="Buscar"><div id="chart_div"></div>

</body>
</html>

Index-ajax.php

<?php

///Criar a array para o Json
$table = array();

//Inserir as colunas
$table['cols'] = array(
array('label' => 'Name', 'type' => 'string'),
array('label' => '#', 'type' => 'string'),
//array('label' => 'Selecionar', 'type' => 'string')
);

//Cria a array para as linhas
$rows = array();for ($i=0; $i < 2000; $i++) {
$temp = array();
$temp[] = array('v' => 'Apple', 'p' => array('style' => 'text-align: center'));
$temp[] = array('v' => $i, 'p' => array('style' => 'text-align: center'));

$rows[] = array('c' => $temp);

}

$table['rows'] = $rows;

$jsontable = json_encode($table);

echo $jsontable;

?>

0

ajax google-visualization jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

В вызов JQuery AJAX вам нужно добавить это …
beforeSend: function(){ $("#chart_div").html('<img src="/img/loading.gif">'); },

Для ясности, вот полная функция рисования, которую я написал для моей …

function drawChart2() {
$.ajax({
url: '../ajax/gc_position_ret_min.php',
beforeSend: function(){
$("#chart2").html('<img src="/img/loading.gif">');
},
type: 'post',
data: {
cat: cat,
},
dataType: 'json'
}).done(function(data){
console.log(data);
jsonData = data;

var data = new google.visualization.DataTable(jsonData);
var options = {
//none
};

var chart = new google.charts.Bar(document.getElementById('chart2'));
chart.draw(data, options);

}).fail(function(){
//
});//AJAX
}

1