2012-11-26 5 views
0

У меня есть диаграмма строки Google, в которой используются данные SQL. Однако, когда 0 строк возвращаются запросом, на странице отображается большая пустая диаграмма. Я хотел бы вместо этого отобразить текст, говорящий, что данных нет. Я попытался обернуть функции диаграммы внутри другой функции, которую я вызываю, если данные присутствуют, но ничего не отображалось, даже если данные присутствовали. Вот некоторые из моего кода:Отображение диаграммы Google только при наличии данных

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
function displayChart() 
{ 
    $(document).ready(function() 
    { 
     google.setOnLoadCallback(drawChart); 
    }); 
} 
function drawChart() 
{ 
// Here we tell it to make an ajax call to pull the data from the .json file 
    var jsonData = $.ajax({ 
    url: "Data.json", 
    dataType:"json", 
    async: false 
}).responseText; 

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

// Options for the graph, we set chartArea to get rid of extra whitespace 
var options = { 
       'width':1300, 
       'height':500, 
       'chartArea': {top:'10%', left:'5%', height:'75%', width:'85%'} 
       }; 

// Instantiate and draw our chart, passing in some options and putting it in the chart_div. 
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
chart.draw(data,options); 
} 
</script> 
<? 

... 

if($got_data == true) 
{ 
    displayChart(); 
} 
else 
    echo "There is no data"; 

Любая идея о том, что я делаю не так, или лучший способ для достижения этой цели? Заранее спасибо!

+0

, как и где это значение $ got_data set? – dreamerkumar

+1

Использовать обратный вызов $ .ajax вместо синхронного вызова – Sergii

+0

@Vishal Kumar $ got_data присваивается true после запроса sql, если возвращается 1 или более строк. Я проверил, и это работает правильно – user1504583

ответ

0

Как говорится в комментарии Serg, вам нужно установить, отображать ли ваш график в обратном вызове от вашего вызова ajax. Это связано с тем, что данные, которые будут возвращены из вашего вызова ajax, отсутствуют и не доступны, когда вы вызываете $.ajax(). Если вы посмотрите вниз на JQuery AJAX page вы увидите несколько примеров того, как иметь дело с данными вызова Ajax, но то, что вы ищете будет что-то вроде следующего:

$.ajax({ 
    url: "Data.json", 
    dataType:"json", 
    async: false 
}).complete(function(data) { 
    if (data) { 
     // draw chart 
    } else { 
     // say no data 
    } 
); 
+0

Но вызов ajax находится внутри функции drawChart. Мне нужно было бы вызвать функцию drawChart из функции drawChart? Я знаю о рекурсивных функциях, но я не уверен, что это сработает. – user1504583

+0

должно быть что-то вроде 'getChartData', который содержит вызов ajax, тогда функция ajax complete вызовет функцию drawChart – zbrunson

Смежные вопросы